<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/canvas.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:45 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=scripting.html>← 4.12 Scripting</a> — <a href=index.html>Table of Contents</a> — <a href=custom-elements.html>4.13 Custom elements →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=canvas.html#the-canvas-element><span class=secno>4.12.5</span> The <code>canvas</code> element</a><ol><li><a href=canvas.html#2dcontext><span class=secno>4.12.5.1</span> The 2D rendering context</a><ol><li><a href=canvas.html#implementation-notes><span class=secno>4.12.5.1.1</span> Implementation notes</a><li><a href=canvas.html#the-canvas-settings><span class=secno>4.12.5.1.2</span> The canvas settings</a><li><a href=canvas.html#the-canvas-state><span class=secno>4.12.5.1.3</span> The canvas state</a><li><a href=canvas.html#line-styles><span class=secno>4.12.5.1.4</span> Line styles</a><li><a href=canvas.html#text-styles><span class=secno>4.12.5.1.5</span> Text styles</a><li><a href=canvas.html#building-paths><span class=secno>4.12.5.1.6</span> Building paths</a><li><a href=canvas.html#path2d-objects><span class=secno>4.12.5.1.7</span> <code>Path2D</code> objects</a><li><a href=canvas.html#transformations><span class=secno>4.12.5.1.8</span> Transformations</a><li><a href=canvas.html#image-sources-for-2d-rendering-contexts><span class=secno>4.12.5.1.9</span> Image sources for 2D rendering contexts</a><li><a href=canvas.html#fill-and-stroke-styles><span class=secno>4.12.5.1.10</span> Fill and stroke styles</a><li><a href=canvas.html#drawing-rectangles-to-the-bitmap><span class=secno>4.12.5.1.11</span> Drawing rectangles to the bitmap</a><li><a href=canvas.html#drawing-text-to-the-bitmap><span class=secno>4.12.5.1.12</span> Drawing text to the bitmap</a><li><a href=canvas.html#drawing-paths-to-the-canvas><span class=secno>4.12.5.1.13</span> Drawing paths to the canvas</a><li><a href=canvas.html#drawing-focus-rings-and-scrolling-paths-into-view><span class=secno>4.12.5.1.14</span> Drawing focus rings</a><li><a href=canvas.html#drawing-images><span class=secno>4.12.5.1.15</span> Drawing images</a><li><a href=canvas.html#pixel-manipulation><span class=secno>4.12.5.1.16</span> Pixel manipulation</a><li><a href=canvas.html#compositing><span class=secno>4.12.5.1.17</span> Compositing</a><li><a href=canvas.html#image-smoothing><span class=secno>4.12.5.1.18</span> Image smoothing</a><li><a href=canvas.html#shadows><span class=secno>4.12.5.1.19</span> Shadows</a><li><a href=canvas.html#filters><span class=secno>4.12.5.1.20</span> Filters</a><li><a href=canvas.html#working-with-externally-defined-svg-filters><span class=secno>4.12.5.1.21</span> Working with externally-defined SVG filters</a><li><a href=canvas.html#drawing-model><span class=secno>4.12.5.1.22</span> Drawing model</a><li><a href=canvas.html#best-practices><span class=secno>4.12.5.1.23</span> Best practices</a><li><a href=canvas.html#examples><span class=secno>4.12.5.1.24</span> Examples</a></ol><li><a href=canvas.html#the-imagebitmap-rendering-context><span class=secno>4.12.5.2</span> The <code>ImageBitmap</code> rendering context</a><ol><li><a href=canvas.html#introduction-6><span class=secno>4.12.5.2.1</span> Introduction</a><li><a href=canvas.html#the-imagebitmaprenderingcontext-interface><span class=secno>4.12.5.2.2</span> The <code>ImageBitmapRenderingContext</code> interface</a></ol><li><a href=canvas.html#the-offscreencanvas-interface><span class=secno>4.12.5.3</span> The <code>OffscreenCanvas</code> interface</a><ol><li><a href=canvas.html#the-offscreen-2d-rendering-context><span class=secno>4.12.5.3.1</span> The offscreen 2D rendering context</a></ol><li><a href=canvas.html#colour-spaces-and-colour-correction><span class=secno>4.12.5.4</span> Color spaces and color space
  conversion</a><li><a href=canvas.html#serialising-bitmaps-to-a-file><span class=secno>4.12.5.5</span> Serializing bitmaps to a file</a><li><a href=canvas.html#security-with-canvas-elements><span class=secno>4.12.5.6</span> Security with <code>canvas</code> elements</a><li><a href=canvas.html#premultiplied-alpha-and-the-2d-rendering-context><span class=secno>4.12.5.7</span> Premultiplied alpha and the 2D rendering context</a></ol></ol></ol></ol><h4 id=the-canvas-element><span class=secno>4.12.5</span> The <dfn id=canvas data-dfn-type=element><code>canvas</code></dfn> element<a href=#the-canvas-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas title="Use the HTML <canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations.">Element/canvas</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement title="The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.">HTMLCanvasElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-canvas-element:concept-element-categories>Categories</a>:<dd><a id=the-canvas-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-canvas-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-canvas-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a id=the-canvas-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-canvas-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-canvas-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-canvas-element:concept-element-content-model>Content model</a>:<dd><a id=the-canvas-element:transparent href=dom.html#transparent>Transparent</a>, but with no <a id=the-canvas-element:interactive-content-2 href=dom.html#interactive-content-2>interactive content</a> descendants except
   for <code id=the-canvas-element:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> elements, <code id=the-canvas-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> elements with
   <code id=the-canvas-element:attr-hyperlink-usemap><a href=image-maps.html#attr-hyperlink-usemap>usemap</a></code> attributes, <code id=the-canvas-element:the-button-element><a href=form-elements.html#the-button-element>button</a></code> elements,
   <code id=the-canvas-element:the-input-element><a href=input.html#the-input-element>input</a></code> elements whose <code id=the-canvas-element:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute are in
   the <a href="input.html#checkbox-state-(type=checkbox)" id="the-canvas-element:checkbox-state-(type=checkbox)">Checkbox</a> or <a href="input.html#radio-button-state-(type=radio)" id="the-canvas-element:radio-button-state-(type=radio)">Radio Button</a> states, <code id=the-canvas-element:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements that are
   <a href=forms.html#concept-button id=the-canvas-element:concept-button>buttons</a>, and <code id=the-canvas-element:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements with a <code id=the-canvas-element:attr-select-multiple><a href=form-elements.html#attr-select-multiple>multiple</a></code> attribute or a <a href=form-elements.html#concept-select-size id=the-canvas-element:concept-select-size>display size</a> greater than 1.<dt><a href=dom.html#concept-element-tag-omission id=the-canvas-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-canvas-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-canvas-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-canvas-element:attr-canvas-width><a href=#attr-canvas-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-canvas-element:attr-canvas-height><a href=#attr-canvas-height>height</a></code> —  Vertical dimension
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-canvas-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-canvas>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-canvas>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-canvas-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'><c- b>typedef</c-> (<a href='#canvasrenderingcontext2d' id='the-canvas-element:canvasrenderingcontext2d'><c- n>CanvasRenderingContext2D</c-></a> <c- b>or</c-> <a href='#imagebitmaprenderingcontext' id='the-canvas-element:imagebitmaprenderingcontext'><c- n>ImageBitmapRenderingContext</c-></a> <c- b>or</c-> <a id='the-canvas-element:webglrenderingcontext' href='https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext' data-x-internal='webglrenderingcontext'><c- n>WebGLRenderingContext</c-></a> <c- b>or</c-> <a id='the-canvas-element:webgl2renderingcontext' href='https://www.khronos.org/registry/webgl/specs/latest/2.0/#WebGL2RenderingContext' data-x-internal='webgl2renderingcontext'><c- n>WebGL2RenderingContext</c-></a> <c- b>or</c-> <a id='the-canvas-element:gpucanvascontext' href='https://gpuweb.github.io/gpuweb/#canvas-context' data-x-internal='gpucanvascontext'><c- n>GPUCanvasContext</c-></a>) <dfn id='renderingcontext' data-dfn-type='typedef'><c- g>RenderingContext</c-></dfn>;

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlcanvaselement' data-dfn-type='interface'><c- g>HTMLCanvasElement</c-></dfn> : <a id='the-canvas-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-canvas-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-canvas-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-canvas-width' id='the-canvas-element:dom-canvas-width'><c- g>width</c-></a>;
  [<a id='the-canvas-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-canvas-height' id='the-canvas-element:dom-canvas-height'><c- g>height</c-></a>;

  <a href='#renderingcontext' id='the-canvas-element:renderingcontext'><c- n>RenderingContext</c-></a>? <a href='#dom-canvas-getcontext' id='the-canvas-element:dom-canvas-getcontext'><c- g>getContext</c-></a>(<c- b>DOMString</c-> <c- g>contextId</c->, <c- b>optional</c-> <c- b>any</c-> <c- g>options</c-> = <c- b>null</c->);

  <c- b>USVString</c-> <a href='#dom-canvas-todataurl' id='the-canvas-element:dom-canvas-todataurl'><c- g>toDataURL</c-></a>(<c- b>optional</c-> <c- b>DOMString</c-> <c- g>type</c-> = &quot;image/png&quot;, <c- b>optional</c-> <c- b>any</c-> <c- g>quality</c->);
  <c- b>undefined</c-> <a href='#dom-canvas-toblob' id='the-canvas-element:dom-canvas-toblob'><c- g>toBlob</c-></a>(<a href='#blobcallback' id='the-canvas-element:blobcallback'><c- n>BlobCallback</c-></a> <c- g>_callback</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>type</c-> = &quot;image/png&quot;, <c- b>optional</c-> <c- b>any</c-> <c- g>quality</c->);
  <a href='#offscreencanvas' id='the-canvas-element:offscreencanvas'><c- n>OffscreenCanvas</c-></a> <a href='#dom-canvas-transfercontroltooffscreen' id='the-canvas-element:dom-canvas-transfercontroltooffscreen'><c- g>transferControlToOffscreen</c-></a>();
};

<c- b>callback</c-> <dfn id='blobcallback' data-dfn-type='callback'><c- g>BlobCallback</c-></dfn> = <c- b>undefined</c-> (<a id='the-canvas-element:blob' href='https://w3c.github.io/FileAPI/#dfn-Blob' data-x-internal='blob'><c- n>Blob</c-></a>? <c- g>blob</c->);</code></pre>
   </dl>

  <p>The <code id=the-canvas-element:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element provides scripts with a resolution-dependent bitmap canvas,
  which can be used for rendering graphs, game graphics, art, or other visual images on the fly.</p>

  <p>Authors should not use the <code id=the-canvas-element:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> element in a document when a more suitable
  element is available. For example, it is inappropriate to use a <code id=the-canvas-element:the-canvas-element-3><a href=#the-canvas-element>canvas</a></code> element to
  render a page heading: if the desired presentation of the heading is graphically intense, it
  should be marked up using appropriate elements (typically <code id=the-canvas-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>) and then styled using
  CSS and supporting technologies such as <a href=https://dom.spec.whatwg.org/#concept-shadow-tree id=the-canvas-element:shadow-tree data-x-internal=shadow-tree>shadow trees</a>.</p>

  <p>When authors use the <code id=the-canvas-element:the-canvas-element-4><a href=#the-canvas-element>canvas</a></code> element, they must also provide content that, when
  presented to the user, conveys essentially the same function or purpose as the
  <code id=the-canvas-element:the-canvas-element-5><a href=#the-canvas-element>canvas</a></code>'s bitmap. This content may be placed as content of the <code id=the-canvas-element:the-canvas-element-6><a href=#the-canvas-element>canvas</a></code>
  element. The contents of the <code id=the-canvas-element:the-canvas-element-7><a href=#the-canvas-element>canvas</a></code> element, if any, are the element's <a id=the-canvas-element:fallback-content href=dom.html#fallback-content>fallback
  content</a>.</p>

  <hr>

  <p>In interactive visual media, if <a href=webappapis.html#concept-n-script id=the-canvas-element:concept-n-script>scripting is enabled</a> for
  the <code id=the-canvas-element:the-canvas-element-8><a href=#the-canvas-element>canvas</a></code> element, and if support for <code id=the-canvas-element:the-canvas-element-9><a href=#the-canvas-element>canvas</a></code> elements has been enabled,
  then the <code id=the-canvas-element:the-canvas-element-10><a href=#the-canvas-element>canvas</a></code> element <a id=the-canvas-element:represents href=dom.html#represents>represents</a> <a id=the-canvas-element:embedded-content-category-3 href=dom.html#embedded-content-category>embedded content</a>
  consisting of a dynamically created image, the element's bitmap.</p>

  <p>In non-interactive, static, visual media, if the <code id=the-canvas-element:the-canvas-element-11><a href=#the-canvas-element>canvas</a></code> element has been
  previously associated with a rendering context (e.g. if the page was viewed in an interactive
  visual medium and is now being printed, or if some script that ran during the page layout process
  painted on the element), then the <code id=the-canvas-element:the-canvas-element-12><a href=#the-canvas-element>canvas</a></code> element <a id=the-canvas-element:represents-2 href=dom.html#represents>represents</a>
  <a id=the-canvas-element:embedded-content-category-4 href=dom.html#embedded-content-category>embedded content</a> with the element's current bitmap and size. Otherwise, the element
  represents its <a id=the-canvas-element:fallback-content-2 href=dom.html#fallback-content>fallback content</a> instead.</p>

  <p>In non-visual media, and in visual media if <a href=webappapis.html#concept-n-noscript id=the-canvas-element:concept-n-noscript>scripting is
  disabled</a> for the <code id=the-canvas-element:the-canvas-element-13><a href=#the-canvas-element>canvas</a></code> element or if support for <code id=the-canvas-element:the-canvas-element-14><a href=#the-canvas-element>canvas</a></code> elements
  has been disabled, the <code id=the-canvas-element:the-canvas-element-15><a href=#the-canvas-element>canvas</a></code> element <a id=the-canvas-element:represents-3 href=dom.html#represents>represents</a> its <a id=the-canvas-element:fallback-content-3 href=dom.html#fallback-content>fallback
  content</a> instead.</p>

  
  <p>When a <code id=the-canvas-element:the-canvas-element-16><a href=#the-canvas-element>canvas</a></code> element <a id=the-canvas-element:represents-4 href=dom.html#represents>represents</a> <a id=the-canvas-element:embedded-content-category-5 href=dom.html#embedded-content-category>embedded content</a>, the
  user can still focus descendants of the <code id=the-canvas-element:the-canvas-element-17><a href=#the-canvas-element>canvas</a></code> element (in the <a id=the-canvas-element:fallback-content-4 href=dom.html#fallback-content>fallback
  content</a>). When an element is <a id=the-canvas-element:focused href=interaction.html#focused>focused</a>, it is the target of keyboard interaction
  events (even though the element itself is not visible). This allows authors to make an interactive
  canvas keyboard-accessible: authors should have a one-to-one mapping of interactive regions to <i id=the-canvas-element:focusable-area><a href=interaction.html#focusable-area>focusable areas</a></i> in the <a id=the-canvas-element:fallback-content-5 href=dom.html#fallback-content>fallback content</a>. (Focus has no
  effect on mouse interaction events.) <a href=references.html#refsUIEVENTS>[UIEVENTS]</a></p> 

  <p>An element whose nearest <code id=the-canvas-element:the-canvas-element-18><a href=#the-canvas-element>canvas</a></code> element ancestor is <a id=the-canvas-element:being-rendered href=rendering.html#being-rendered>being rendered</a>
  and <a id=the-canvas-element:represents-5 href=dom.html#represents>represents</a> <a id=the-canvas-element:embedded-content-category-6 href=dom.html#embedded-content-category>embedded content</a> is an element that is <dfn id=being-used-as-relevant-canvas-fallback-content>being used as
  relevant canvas fallback content</dfn>.</p>

  <hr>

  <p>The <code id=the-canvas-element:the-canvas-element-19><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the size of the element's bitmap:
  <dfn data-dfn-for=canvas id=attr-canvas-width data-dfn-type=element-attr><code>width</code></dfn> and <dfn data-dfn-for=canvas id=attr-canvas-height data-dfn-type=element-attr><code>height</code></dfn>. These attributes,
  when specified, must have values that are <a href=common-microsyntaxes.html#valid-non-negative-integer id=the-canvas-element:valid-non-negative-integer>valid
  non-negative integers</a>.  The <a id=the-canvas-element:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative
  integers</a> must be used to <dfn id=obtain-numeric-values>obtain their numeric
  values</dfn>. If an attribute is missing, or if parsing its value returns an error, then the
  default value must be used instead. The <code id=the-canvas-element:attr-canvas-width-2><a href=#attr-canvas-width>width</a></code>
  attribute defaults to 300, and the <code id=the-canvas-element:attr-canvas-height-2><a href=#attr-canvas-height>height</a></code> attribute
  defaults to 150.</p>

  <p>When setting the value of the <code id=the-canvas-element:attr-canvas-width-3><a href=#attr-canvas-width>width</a></code> or <code id=the-canvas-element:attr-canvas-height-3><a href=#attr-canvas-height>height</a></code> attribute, if the <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode>context mode</a> of the <code id=the-canvas-element:the-canvas-element-20><a href=#the-canvas-element>canvas</a></code>
  element is set to <a href=#concept-canvas-placeholder id=the-canvas-element:concept-canvas-placeholder>placeholder</a>, the
  user agent must throw an <a id=the-canvas-element:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-canvas-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>
  and leave the attribute's value unchanged.</p>

  <p>The <a id=the-canvas-element:natural-dimensions href=https://drafts.csswg.org/css-images/#natural-dimensions data-x-internal=natural-dimensions>natural dimensions</a> of the <code id=the-canvas-element:the-canvas-element-21><a href=#the-canvas-element>canvas</a></code> element when it
  <a id=the-canvas-element:represents-6 href=dom.html#represents>represents</a> <a id=the-canvas-element:embedded-content-category-7 href=dom.html#embedded-content-category>embedded content</a> are equal to the dimensions of the
  element's bitmap.</p>

  <p>The user agent must use a square pixel density consisting of one pixel of image data per
  coordinate space unit for the bitmaps of a <code id=the-canvas-element:the-canvas-element-22><a href=#the-canvas-element>canvas</a></code> and its rendering contexts.</p>

  <p class=note>A <code id=the-canvas-element:the-canvas-element-23><a href=#the-canvas-element>canvas</a></code> element can be sized arbitrarily by a style sheet, its
  bitmap is then subject to the <a id="the-canvas-element:'object-fit'" href=https://drafts.csswg.org/css-images/#the-object-fit data-x-internal="'object-fit'">'object-fit'</a> CSS property.</p>

  

  <hr>

  <p>The bitmaps of <code id=the-canvas-element:the-canvas-element-24><a href=#the-canvas-element>canvas</a></code> elements, the bitmaps of <code id=the-canvas-element:imagebitmap><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> objects,
  as well as some of the bitmaps of rendering contexts, such as those described in the sections on
  the <code id=the-canvas-element:canvasrenderingcontext2d-2><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>, <code id=the-canvas-element:offscreencanvasrenderingcontext2d><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code>, and
  <code id=the-canvas-element:imagebitmaprenderingcontext-2><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> objects below, have an <dfn id=concept-canvas-origin-clean>origin-clean</dfn> flag, which can be set to true or false.
  Initially, when the <code id=the-canvas-element:the-canvas-element-25><a href=#the-canvas-element>canvas</a></code> element or <code id=the-canvas-element:imagebitmap-2><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> object is created, its
  bitmap's <a href=#concept-canvas-origin-clean id=the-canvas-element:concept-canvas-origin-clean>origin-clean</a> flag must be set to
  true.</p>

  <p>A <code id=the-canvas-element:the-canvas-element-26><a href=#the-canvas-element>canvas</a></code> element can have a rendering context bound to it. Initially, it does not
  have a bound rendering context. To keep track of whether it has a rendering context or not, and
  what kind of rendering context it is, a <code id=the-canvas-element:the-canvas-element-27><a href=#the-canvas-element>canvas</a></code> also has a <dfn id=concept-canvas-context-mode>canvas context mode</dfn>, which is initially <dfn id=concept-canvas-none>none</dfn> but can be changed to either <dfn id=concept-canvas-placeholder>placeholder</dfn>, <dfn id=concept-canvas-2d>2d</dfn>, <dfn id=concept-canvas-bitmaprenderer>bitmaprenderer</dfn>, <dfn id=concept-canvas-webgl>webgl</dfn>, <dfn id=concept-canvas-webgl2>webgl2</dfn>, or <dfn id=concept-canvas-webgpu>webgpu</dfn> by algorithms defined in this specification.</p>

  <p>When its <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-2>canvas context mode</a> is <a href=#concept-canvas-none id=the-canvas-element:concept-canvas-none>none</a>, a <code id=the-canvas-element:the-canvas-element-28><a href=#the-canvas-element>canvas</a></code> element has no rendering context,
  and its bitmap must be <a id=the-canvas-element:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> with a <a id=the-canvas-element:natural-width href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> equal
  to <a href=#obtain-numeric-values id=the-canvas-element:obtain-numeric-values>the numeric value</a> of the element's <code id=the-canvas-element:attr-canvas-width-4><a href=#attr-canvas-width>width</a></code> attribute and a <a id=the-canvas-element:natural-height href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> equal to
  <a href=#obtain-numeric-values id=the-canvas-element:obtain-numeric-values-2>the numeric value</a> of the element's <code id=the-canvas-element:attr-canvas-height-4><a href=#attr-canvas-height>height</a></code> attribute, those values being interpreted in <a href=https://drafts.csswg.org/css-values/#px id="the-canvas-element:'px'" data-x-internal="'px'">CSS pixels</a>, and being updated as the attributes are set, changed, or
  removed.</p>

  <p>When its <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-3>canvas context mode</a> is <a href=#concept-canvas-placeholder id=the-canvas-element:concept-canvas-placeholder-2>placeholder</a>, a <code id=the-canvas-element:the-canvas-element-29><a href=#the-canvas-element>canvas</a></code> element has no
  rendering context. It serves as a placeholder for an <code id=the-canvas-element:offscreencanvas-2><a href=#offscreencanvas>OffscreenCanvas</a></code> object, and
  the content of the <code id=the-canvas-element:the-canvas-element-30><a href=#the-canvas-element>canvas</a></code> element is updated by the <code id=the-canvas-element:offscreencanvas-3><a href=#offscreencanvas>OffscreenCanvas</a></code>
  object's rendering context.</p>

  <p>When a <code id=the-canvas-element:the-canvas-element-31><a href=#the-canvas-element>canvas</a></code> element represents <a id=the-canvas-element:embedded-content-category-8 href=dom.html#embedded-content-category>embedded content</a>, it provides a
  <a id=the-canvas-element:paint-source href=https://drafts.csswg.org/css-images-4/#paint-source data-x-internal=paint-source>paint source</a> whose width is the element's <a id=the-canvas-element:natural-width-2 href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a>, whose height
  is the element's <a id=the-canvas-element:natural-height-2 href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a>, and whose appearance is the element's bitmap.</p>

  <p>Whenever the <code id=the-canvas-element:attr-canvas-width-5><a href=#attr-canvas-width>width</a></code> and <code id=the-canvas-element:attr-canvas-height-5><a href=#attr-canvas-height>height</a></code> content attributes are set, removed, changed, or
  redundantly set to the value they already have, then the user agent must perform the action
  from the row of the following table that corresponds to the <code id=the-canvas-element:the-canvas-element-32><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-4>context mode</a>.</p>

  <table><thead><tr><th>
      <p><a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-5>Context Mode</a></p>
     <th>
      <p>Action</p>

   <tbody><tr><th>
      <p><a href=#concept-canvas-2d id=the-canvas-element:concept-canvas-2d>2d</a></p>
     <td>
      <p>Follow the steps to <a href=#concept-canvas-set-bitmap-dimensions id=the-canvas-element:concept-canvas-set-bitmap-dimensions>set bitmap
      dimensions</a> to <a href=#obtain-numeric-values id=the-canvas-element:obtain-numeric-values-3>the numeric values</a>
      of the <code id=the-canvas-element:attr-canvas-width-6><a href=#attr-canvas-width>width</a></code> and <code id=the-canvas-element:attr-canvas-height-6><a href=#attr-canvas-height>height</a></code> content attributes.</p>

    <tr><th>
      <p><a href=#concept-canvas-webgl id=the-canvas-element:concept-canvas-webgl>webgl</a> or <a href=#concept-canvas-webgl2 id=the-canvas-element:concept-canvas-webgl2>webgl2</a></p>
     <td>
      <p>Follow the behavior defined in the WebGL specifications. <a href=references.html#refsWEBGL>[WEBGL]</a></p>

    <tr><th>
      <p><a href=#concept-canvas-webgpu id=the-canvas-element:concept-canvas-webgpu>webgpu</a></p>
     <td>
      <p>Follow the behavior defined in <cite>WebGPU</cite>. <a href=references.html#refsWEBGPU>[WEBGPU]</a></p>

    <tr><th>
      <p><a href=#concept-canvas-bitmaprenderer id=the-canvas-element:concept-canvas-bitmaprenderer>bitmaprenderer</a></p>
     <td>
      <p>If the context's <a href=#concept-imagebitmaprenderingcontext-bitmap-mode id=the-canvas-element:concept-imagebitmaprenderingcontext-bitmap-mode>bitmap
      mode</a> is set to <a href=#concept-imagebitmaprenderingcontext-blank id=the-canvas-element:concept-imagebitmaprenderingcontext-blank>blank</a>,
      run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-canvas-element:set-an-imagebitmaprenderingcontext's-output-bitmap">set an <code>ImageBitmapRenderingContext</code>'s output bitmap</a>,
      passing the <code id=the-canvas-element:the-canvas-element-33><a href=#the-canvas-element>canvas</a></code> element's rendering context.</p>

    <tr><th>
      <p><a href=#concept-canvas-placeholder id=the-canvas-element:concept-canvas-placeholder-3>placeholder</a></p>
     <td>
      <p>Do nothing.</p>

    <tr><th>
      <p><a href=#concept-canvas-none id=the-canvas-element:concept-canvas-none-2>none</a></p>
     <td>
      <p>Do nothing.</p>
  </table>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/height title="The HTMLCanvasElement.height property is a positive integer reflecting the height HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used.">HTMLCanvasElement/height</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/width title="The HTMLCanvasElement.width property is a positive integer reflecting the width HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used.">HTMLCanvasElement/width</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLCanvasElement id=dom-canvas-width data-dfn-type=attribute><code>width</code></dfn>
  and <dfn data-dfn-for=HTMLCanvasElement id=dom-canvas-height data-dfn-type=attribute><code>height</code></dfn>
  IDL attributes must <a id=the-canvas-element:reflect href=common-dom-interfaces.html#reflect>reflect</a> the respective content attributes of the same name, with
  the same defaults.</p>

  

  <hr>

  <dl class=domintro><dt><code><var>context</var> = <var>canvas</var>.<a href=#dom-canvas-getcontext id=dom-canvas-getcontext-dev>getContext</a>(<var>contextId</var> [, <var>options</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.">HTMLCanvasElement/getContext</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns an object that exposes an API for drawing on the canvas. <var>contextId</var>
    specifies the desired API: "<code id=the-canvas-element:canvas-context-2d><a href=#canvas-context-2d>2d</a></code>", "<code id=the-canvas-element:canvas-context-bitmaprenderer><a href=#canvas-context-bitmaprenderer>bitmaprenderer</a></code>", "<code id=the-canvas-element:canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>", "<code id=the-canvas-element:canvas-context-webgl2><a href=#canvas-context-webgl2>webgl2</a></code>", or "<code id=the-canvas-element:canvas-context-webgpu><a href=#canvas-context-webgpu>webgpu</a></code>". <var>options</var> is handled by that API.</p>

    <p>This specification defines the "<code id=the-canvas-element:canvas-context-2d-2><a href=#canvas-context-2d>2d</a></code>" and "<code id=the-canvas-element:canvas-context-bitmaprenderer-2><a href=#canvas-context-bitmaprenderer>bitmaprenderer</a></code>" contexts below. The WebGL
    specifications define the "<code id=the-canvas-element:canvas-context-webgl-2><a href=#canvas-context-webgl>webgl</a></code>" and "<code id=the-canvas-element:canvas-context-webgl2-2><a href=#canvas-context-webgl2>webgl2</a></code>" contexts. <cite>WebGPU</cite> defines the "<code id=the-canvas-element:canvas-context-webgpu-2><a href=#canvas-context-webgpu>webgpu</a></code>" context. <a href=references.html#refsWEBGL>[WEBGL]</a> <a href=references.html#refsWEBGPU>[WEBGPU]</a></p>

    <p>Returns null if <var>contextId</var> is not supported, or if the canvas has already been
    initialized with another context type (e.g., trying to get a "<code id=the-canvas-element:canvas-context-2d-3><a href=#canvas-context-2d>2d</a></code>" context after getting a "<code id=the-canvas-element:canvas-context-webgl-3><a href=#canvas-context-webgl>webgl</a></code>" context).</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLCanvasElement id=dom-canvas-getcontext data-dfn-type=method><code>getContext(<var>contextId</var>, <var>options</var>)</code></dfn>
  method of the <code id=the-canvas-element:the-canvas-element-34><a href=#the-canvas-element>canvas</a></code> element, when invoked, must run these steps:

  <ol><li><p>If <var>options</var> is not an <a href=https://webidl.spec.whatwg.org/#idl-object id=the-canvas-element:idl-object data-x-internal=idl-object>object</a>, then set
   <var>options</var> to null.<li><p>Set <var>options</var> to the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=the-canvas-element:concept-idl-convert data-x-internal=concept-idl-convert>converting</a> <var>options</var> to a JavaScript value.<li>
    <p>Run the steps in the cell of the following table whose column header matches this
    <code id=the-canvas-element:the-canvas-element-35><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-6>canvas context
    mode</a> and whose row header matches <var>contextId</var>:</p>

    <table><thead><tr><td>
       <th><a href=#concept-canvas-none id=the-canvas-element:concept-canvas-none-3>none</a>
       <th><a href=#concept-canvas-2d id=the-canvas-element:concept-canvas-2d-2>2d</a>
       <th><a href=#concept-canvas-bitmaprenderer id=the-canvas-element:concept-canvas-bitmaprenderer-2>bitmaprenderer</a>
       <th><a href=#concept-canvas-webgl id=the-canvas-element:concept-canvas-webgl-2>webgl</a> or <a href=#concept-canvas-webgl2 id=the-canvas-element:concept-canvas-webgl2-2>webgl2</a>
       <th><a href=#concept-canvas-webgpu id=the-canvas-element:concept-canvas-webgpu-2>webgpu</a>
       <th><a href=#concept-canvas-placeholder id=the-canvas-element:concept-canvas-placeholder-4>placeholder</a>
     <tbody><tr><th>"<dfn id=canvas-context-2d><code>2d</code></dfn>"
       <td>
        <ol><li><p>Let <var>context</var> be the result of running the <a href=#2d-context-creation-algorithm id=the-canvas-element:2d-context-creation-algorithm>2D context
         creation algorithm</a> given <a id=the-canvas-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and <var>options</var>.<li><p>Set <a id=the-canvas-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-7>context
         mode</a> to <a href=#concept-canvas-2d id=the-canvas-element:concept-canvas-2d-3>2d</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return the same object as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Throw an <a id=the-canvas-element:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-canvas-element:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
      <tr><th>"<dfn id=canvas-context-bitmaprenderer><code>bitmaprenderer</code></dfn>"
       <td>
        <ol><li><p>Let <var>context</var> be the result of running the
         <a href=#imagebitmaprenderingcontext-creation-algorithm id=the-canvas-element:imagebitmaprenderingcontext-creation-algorithm><code>ImageBitmapRenderingContext</code> creation algorithm</a> given
         <a id=the-canvas-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and <var>options</var>.<li><p>Set <a id=the-canvas-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-8>context
         mode</a> to <a href=#concept-canvas-bitmaprenderer id=the-canvas-element:concept-canvas-bitmaprenderer-3>bitmaprenderer</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return null.
       <td>
        Return the same object as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Throw an <a id=the-canvas-element:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-canvas-element:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
      <tr><th>"<dfn id=canvas-context-webgl><code>webgl</code></dfn>" or "<dfn id=canvas-context-webgl2><code>webgl2</code></dfn>", if the user agent supports the WebGL
       feature in its current configuration
       <td>
        <ol><li><p>Let <var>context</var> be the result of following the instructions given in
         the WebGL specifications' <i>Context Creation</i> sections. <a href=references.html#refsWEBGL>[WEBGL]</a><li><p>If <var>context</var> is null, then return null; otherwise set <a id=the-canvas-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
         <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-9>context mode</a> to <a href=#concept-canvas-webgl id=the-canvas-element:concept-canvas-webgl-3>webgl</a> or <a href=#concept-canvas-webgl2 id=the-canvas-element:concept-canvas-webgl2-3>webgl2</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return the same object as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Return null.
       <td>
        Throw an <a id=the-canvas-element:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-canvas-element:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
      <tr><th>"<dfn id=canvas-context-webgpu><code>webgpu</code></dfn>", if the user
       agent supports the WebGPU feature in its current configuration
       <td>
        <ol><li><p>Let <var>context</var> be the result of following the instructions given
         in <cite>WebGPU</cite>'s <a href=https://gpuweb.github.io/gpuweb/#canvas-rendering>Canvas Rendering</a>
         section. <a href=references.html#refsWEBGPU>[WEBGPU]</a><li><p>If <var>context</var> is null, then return null; otherwise set
         <a id=the-canvas-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-10>context mode</a> to
         <a href=#concept-canvas-webgpu id=the-canvas-element:concept-canvas-webgpu-3>webgpu</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return the same object as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Throw an <a id=the-canvas-element:invalidstateerror-5 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-canvas-element:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
      <tr><th>An unsupported value*
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Throw an <a id=the-canvas-element:invalidstateerror-6 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-canvas-element:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
    </table>

    <p class=tablenote><small>* For example, the "<code id=the-canvas-element:canvas-context-webgl-4><a href=#canvas-context-webgl>webgl</a></code>" or "<code id=the-canvas-element:canvas-context-webgl2-3><a href=#canvas-context-webgl2>webgl2</a></code>" value in the case of a user agent having exhausted
    the graphics hardware's abilities and having no software fallback implementation.</small></p>
   </ol>

  <hr>

  

  <dl class=domintro><dt><code><var>url</var> = <var>canvas</var>.<a href=#dom-canvas-todataurl id=dom-canvas-todataurl-dev>toDataURL</a>([ <var>type</var> [, <var>quality</var> ] ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL title="The HTMLCanvasElement.toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter.">HTMLCanvasElement/toDataURL</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns a <a href=https://www.rfc-editor.org/rfc/rfc2397#section-2 id=the-canvas-element:data-protocol data-x-internal=data-protocol><code>data:</code> URL</a> for the image in the
    canvas.</p>

    <p>The first argument, if provided, controls the type of the image to be returned (e.g. PNG or
    JPEG). The default is "<code id=the-canvas-element:image/png><a href=indices.html#image/png>image/png</a></code>"; that type is also used if the given type isn't
    supported. The second argument applies if the type is an image format that supports variable
    quality (such as "<code id=the-canvas-element:image/jpeg><a href=indices.html#image/jpeg>image/jpeg</a></code>"), and is a number in the range 0.0 to 1.0 inclusive
    indicating the desired quality level for the resulting image.</p>

    <p>When trying to use types other than "<code id=the-canvas-element:image/png-2><a href=indices.html#image/png>image/png</a></code>", authors can check if the image
    was really returned in the requested format by checking to see if the returned string starts
    with one of the exact strings "<code>data:image/png,</code>" or "<code>data:image/png;</code>". If it does, the image is PNG, and thus the requested type was
    not supported. (The one exception to this is if the canvas has either no height or no width, in
    which case the result might simply be "<code>data:,</code>".)</p>
   <dt><code><var>canvas</var>.<a href=#dom-canvas-toblob id=dom-canvas-toblob-dev>toBlob</a>(<var>callback</var> [, <var>type</var> [, quality ] ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob title="The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas. This file may be cached on the disk or stored in memory at the discretion of the user agent.">HTMLCanvasElement/toBlob</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>18+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>50+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span title="Requires a prefix or alternative name.">🔰 10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Creates a <code id=the-canvas-element:blob-2><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object representing a file containing the image in the canvas,
    and invokes a callback with a handle to that object.</p>

    <p>The second argument, if provided, controls the type of the image to be returned (e.g. PNG or
    JPEG). The default is "<code id=the-canvas-element:image/png-3><a href=indices.html#image/png>image/png</a></code>"; that type is also used if the given type isn't
    supported. The third argument applies if the type is an image format that supports variable
    quality (such as "<code id=the-canvas-element:image/jpeg-2><a href=indices.html#image/jpeg>image/jpeg</a></code>"), and is a number in the range 0.0 to 1.0 inclusive
    indicating the desired quality level for the resulting image.</p>
   <dt><code><var>canvas</var>.<a href=#dom-canvas-transfercontroltooffscreen id=dom-canvas-transfercontroltooffscreen-dev>transferControlToOffscreen</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen title="The HTMLCanvasElement.transferControlToOffscreen() method transfers control to an OffscreenCanvas object, either on the main thread or on a worker.">HTMLCanvasElement/transferControlToOffscreen</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns a newly created <code id=the-canvas-element:offscreencanvas-4><a href=#offscreencanvas>OffscreenCanvas</a></code> object that uses the
    <code id=the-canvas-element:the-canvas-element-36><a href=#the-canvas-element>canvas</a></code> element as a placeholder. Once the <code id=the-canvas-element:the-canvas-element-37><a href=#the-canvas-element>canvas</a></code> element has become a
    placeholder for an <code id=the-canvas-element:offscreencanvas-5><a href=#offscreencanvas>OffscreenCanvas</a></code> object, its natural size can no longer be
    changed, and it cannot have a rendering context. The content of the placeholder canvas is
    updated on the <code id=the-canvas-element:offscreencanvas-6><a href=#offscreencanvas>OffscreenCanvas</a></code>'s <a id=the-canvas-element:relevant-agent href=webappapis.html#relevant-agent>relevant agent</a>'s <a href=webappapis.html#concept-agent-event-loop id=the-canvas-element:concept-agent-event-loop>event loop</a>'s <a id=the-canvas-element:update-the-rendering href=webappapis.html#update-the-rendering>update the rendering</a>
    steps.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLCanvasElement id=dom-canvas-todataurl data-dfn-type=method><code>toDataURL(<var>type</var>, <var>quality</var>)</code></dfn> method,
  when invoked, must run these steps:</p>

  <ol><li><p>If this <code id=the-canvas-element:the-canvas-element-38><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean id=the-canvas-element:concept-canvas-origin-clean-2>origin-clean</a> flag is set to false, then throw a
   <a id=the-canvas-element:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-canvas-element:domexception-7><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

   <li><p>If this <code id=the-canvas-element:the-canvas-element-39><a href=#the-canvas-element>canvas</a></code> element's bitmap has no pixels (i.e. either its horizontal
   dimension or its vertical dimension is zero), then return the string "<code>data:,</code>". (This is the shortest <a href=https://www.rfc-editor.org/rfc/rfc2397#section-2 id=the-canvas-element:data-protocol-2 data-x-internal=data-protocol><code>data:</code> URL</a>; it represents the empty string in a <code>text/plain</code> resource.)<li><p>Let <var>file</var> be <a href=#a-serialisation-of-the-bitmap-as-a-file id=the-canvas-element:a-serialisation-of-the-bitmap-as-a-file>a
   serialization of this <code>canvas</code> element's bitmap as a file</a>, passing
   <var>type</var> and <var>quality</var> if given.<li><p>If <var>file</var> is null, then return "<code>data:,</code>".<li><p>Return a <a href=https://www.rfc-editor.org/rfc/rfc2397#section-2 id=the-canvas-element:data-protocol-3 data-x-internal=data-protocol><code>data:</code> URL</a> representing
   <var>file</var>. <a href=references.html#refsRFC2397>[RFC2397]</a></p>

   
  </ol>

  <p>The <dfn data-dfn-for=HTMLCanvasElement id=dom-canvas-toblob data-dfn-type=method><code>toBlob(<var>callback</var>, <var>type</var>,
  <var>quality</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If this <code id=the-canvas-element:the-canvas-element-40><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean id=the-canvas-element:concept-canvas-origin-clean-3>origin-clean</a> flag is set to false, then throw a
   <a id=the-canvas-element:securityerror-2 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-canvas-element:domexception-8><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>result</var> be null.<li><p>If this <code id=the-canvas-element:the-canvas-element-41><a href=#the-canvas-element>canvas</a></code> element's bitmap has pixels (i.e., neither its horizontal
   dimension nor its vertical dimension is zero), then set <var>result</var> to a copy of this
   <code id=the-canvas-element:the-canvas-element-42><a href=#the-canvas-element>canvas</a></code> element's bitmap.

   <li>
    <p>Run these steps <a id=the-canvas-element:in-parallel href=infrastructure.html#in-parallel>in parallel</a>:</p>

    <ol><li><p>If <var>result</var> is non-null, then set <var>result</var> to <a href=#a-serialisation-of-the-bitmap-as-a-file id=the-canvas-element:a-serialisation-of-the-bitmap-as-a-file-2>a serialization of <var>result</var> as a file</a>
     with <var>type</var> and <var>quality</var> if given.<li>
      <p><a id=the-canvas-element:queue-an-element-task href=webappapis.html#queue-an-element-task>Queue an element task</a> on the
      <dfn id=canvas-blob-serialisation-task-source>canvas blob serialization task
      source</dfn> given the <code id=the-canvas-element:the-canvas-element-43><a href=#the-canvas-element>canvas</a></code> element to run these steps:</p>

      <ol><li><p>If <var>result</var> is non-null, then set <var>result</var> to a new
       <code id=the-canvas-element:blob-3><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object, created in the <a href=webappapis.html#concept-relevant-realm id=the-canvas-element:concept-relevant-realm>relevant
       realm</a> of this <code id=the-canvas-element:the-canvas-element-44><a href=#the-canvas-element>canvas</a></code> element, representing <var>result</var>.
       <a href=references.html#refsFILEAPI>[FILEAPI]</a><li><p><a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=the-canvas-element:es-invoking-callback-functions data-x-internal=es-invoking-callback-functions>Invoke</a> <var>callback</var> with
       « <var>result</var> » and "<code>report</code>".</ol>
     </ol>
   </ol>

  <p>The <dfn data-dfn-for=HTMLCanvasElement id=dom-canvas-transfercontroltooffscreen data-dfn-type=method><code>transferControlToOffscreen()</code></dfn> method,
  when invoked, must run these steps:</p>

  <ol><li><p>If this <code id=the-canvas-element:the-canvas-element-45><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-11>context
   mode</a> is not set to <a href=#concept-canvas-none id=the-canvas-element:concept-canvas-none-4>none</a>, throw an
   <a id=the-canvas-element:invalidstateerror-7 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-canvas-element:domexception-9><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>offscreenCanvas</var> be a new <code id=the-canvas-element:offscreencanvas-7><a href=#offscreencanvas>OffscreenCanvas</a></code> object with its
   width and height equal to the values of the <code id=the-canvas-element:attr-canvas-width-7><a href=#attr-canvas-width>width</a></code>
   and <code id=the-canvas-element:attr-canvas-height-7><a href=#attr-canvas-height>height</a></code> content attributes of this
   <code id=the-canvas-element:the-canvas-element-46><a href=#the-canvas-element>canvas</a></code> element.<li><p>Set the <var>offscreenCanvas</var>'s <a href=#offscreencanvas-placeholder id=the-canvas-element:offscreencanvas-placeholder>placeholder <code>canvas</code> element</a>
   to a weak reference to this <code id=the-canvas-element:the-canvas-element-47><a href=#the-canvas-element>canvas</a></code> element.<li><p>Set this <code id=the-canvas-element:the-canvas-element-48><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode id=the-canvas-element:concept-canvas-context-mode-12>context
   mode</a> to <a href=#concept-canvas-placeholder id=the-canvas-element:concept-canvas-placeholder-5>placeholder</a>.<li><p>Set the <var>offscreenCanvas</var>'s <a href=#offscreencanvas-inherited-lang id=the-canvas-element:offscreencanvas-inherited-lang>inherited language</a> to the
   <a id=the-canvas-element:language href=dom.html#language>language</a> of this <code id=the-canvas-element:the-canvas-element-49><a href=#the-canvas-element>canvas</a></code> element.<li><p>Set the <var>offscreenCanvas</var>'s <a href=#offscreencanvas-inherited-direction id=the-canvas-element:offscreencanvas-inherited-direction>inherited direction</a> to the <a href=dom.html#the-directionality id=the-canvas-element:the-directionality>directionality</a> of this <code id=the-canvas-element:the-canvas-element-50><a href=#the-canvas-element>canvas</a></code> element.<li><p>Return <var>offscreenCanvas</var>.</ol>

  


  <h5 id=2dcontext><span class=secno>4.12.5.1</span> The 2D rendering context<a href=#2dcontext class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D title="The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.">CanvasRenderingContext2D</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource title="The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.">CanvasImageSource</a></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient title="The CanvasGradient interface represents an opaque object describing a gradient. It is returned by the methods CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createConicGradient() or CanvasRenderingContext2D.createRadialGradient().">CanvasGradient</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern title="The CanvasPattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the CanvasRenderingContext2D.createPattern() method.">CanvasPattern</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics title="The TextMetrics interface represents the dimensions of a piece of text in the canvas; a TextMetrics instance can be retrieved using the CanvasRenderingContext2D.measureText() method.">TextMetrics</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>31+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><pre><code class='idl'><c- b>typedef</c-> (<a id='2dcontext:htmlimageelement' href='embedded-content.html#htmlimageelement'><c- n>HTMLImageElement</c-></a> <c- b>or</c->
         <a id='2dcontext:svgimageelement' href='https://svgwg.org/svg2-draft/embedded.html#InterfaceSVGImageElement' data-x-internal='svgimageelement'><c- n>SVGImageElement</c-></a>) <dfn id='htmlorsvgimageelement' data-dfn-type='typedef'><c- g>HTMLOrSVGImageElement</c-></dfn>;

<c- b>typedef</c-> (<a href='#htmlorsvgimageelement' id='2dcontext:htmlorsvgimageelement'><c- n>HTMLOrSVGImageElement</c-></a> <c- b>or</c->
         <a id='2dcontext:htmlvideoelement' href='media.html#htmlvideoelement'><c- n>HTMLVideoElement</c-></a> <c- b>or</c->
         <a href='#htmlcanvaselement' id='2dcontext:htmlcanvaselement'><c- n>HTMLCanvasElement</c-></a> <c- b>or</c->
         <a id='2dcontext:imagebitmap' href='imagebitmap-and-animations.html#imagebitmap'><c- n>ImageBitmap</c-></a> <c- b>or</c->
         <a href='#offscreencanvas' id='2dcontext:offscreencanvas'><c- n>OffscreenCanvas</c-></a> <c- b>or</c->
         <a id='2dcontext:videoframe' href='https://w3c.github.io/webcodecs/#videoframe-interface' data-x-internal='videoframe'><c- n>VideoFrame</c-></a>) <dfn id='canvasimagesource' data-dfn-type='typedef'><c- g>CanvasImageSource</c-></dfn>;

<c- b>enum</c-> <dfn id='predefinedcolorspace' data-dfn-type='enum'><c- g>PredefinedColorSpace</c-></dfn> { <c- s>&quot;</c-><a href='#dom-predefinedcolorspace-srgb' id='2dcontext:dom-predefinedcolorspace-srgb'><c- s>srgb</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-predefinedcolorspace-display-p3' id='2dcontext:dom-predefinedcolorspace-display-p3'><c- s>display-p3</c-></a><c- s>&quot;</c-> };

<c- b>enum</c-> <dfn id='canvascolortype' data-dfn-type='enum'><c- g>CanvasColorType</c-></dfn> { <c- s>&quot;</c-><a href='#dom-canvascolortype-unorm8' id='2dcontext:dom-canvascolortype-unorm8'><c- s>unorm8</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-canvascolortype-float16' id='2dcontext:dom-canvascolortype-float16'><c- s>float16</c-></a><c- s>&quot;</c-> };

<c- b>enum</c-> <dfn id='canvasfillrule' data-dfn-type='enum'><c- g>CanvasFillRule</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-fillrule-nonzero' id='2dcontext:dom-context-2d-fillrule-nonzero'><c- s>nonzero</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fillrule-evenodd' id='2dcontext:dom-context-2d-fillrule-evenodd'><c- s>evenodd</c-></a><c- s>&quot;</c-> };

<c- b>dictionary</c-> <dfn id='canvasrenderingcontext2dsettings' data-dfn-type='dictionary'><c- g>CanvasRenderingContext2DSettings</c-></dfn> {
  <c- b>boolean</c-> <a href='#dom-canvasrenderingcontext2dsettings-alpha' id='2dcontext:dom-canvasrenderingcontext2dsettings-alpha'><c- g>alpha</c-></a> = <c- b>true</c->;
  <c- b>boolean</c-> <a href='#dom-canvasrenderingcontext2dsettings-desynchronized' id='2dcontext:dom-canvasrenderingcontext2dsettings-desynchronized'><c- g>desynchronized</c-></a> = <c- b>false</c->;
  <a href='#predefinedcolorspace' id='2dcontext:predefinedcolorspace'><c- n>PredefinedColorSpace</c-></a> <a href='#dom-canvasrenderingcontext2dsettings-colorspace' id='2dcontext:dom-canvasrenderingcontext2dsettings-colorspace'><c- g>colorSpace</c-></a> = &quot;<a href='#dom-predefinedcolorspace-srgb' id='2dcontext:dom-predefinedcolorspace-srgb-2'>srgb</a>&quot;;
  <a href='#canvascolortype' id='2dcontext:canvascolortype'><c- n>CanvasColorType</c-></a> <a href='#dom-canvasrenderingcontext2dsettings-colortype' id='2dcontext:dom-canvasrenderingcontext2dsettings-colortype'><c- g>colorType</c-></a> = &quot;<a href='#dom-canvascolortype-unorm8' id='2dcontext:dom-canvascolortype-unorm8-2'>unorm8</a>&quot;;
  <c- b>boolean</c-> <a href='#dom-canvasrenderingcontext2dsettings-willreadfrequently' id='2dcontext:dom-canvasrenderingcontext2dsettings-willreadfrequently'><c- g>willReadFrequently</c-></a> = <c- b>false</c->;
};

<c- b>enum</c-> <dfn id='imagesmoothingquality' data-dfn-type='enum'><c- g>ImageSmoothingQuality</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-imagesmoothingquality-low' id='2dcontext:dom-context-2d-imagesmoothingquality-low'><c- s>low</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-imagesmoothingquality-medium' id='2dcontext:dom-context-2d-imagesmoothingquality-medium'><c- s>medium</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-imagesmoothingquality-high' id='2dcontext:dom-context-2d-imagesmoothingquality-high'><c- s>high</c-></a><c- s>&quot;</c-> };

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='canvasrenderingcontext2d' data-dfn-type='interface'><c- g>CanvasRenderingContext2D</c-></dfn> {
  // back-reference to the canvas
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#htmlcanvaselement' id='2dcontext:htmlcanvaselement-2'><c- n>HTMLCanvasElement</c-></a> <a href='#dom-context-2d-canvas' id='2dcontext:dom-context-2d-canvas'><c- g>canvas</c-></a>;
};
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvassettings' id='2dcontext:canvassettings'><c- n>CanvasSettings</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-2'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasstate' id='2dcontext:canvasstate'><c- n>CanvasState</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-3'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvastransform' id='2dcontext:canvastransform'><c- n>CanvasTransform</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-4'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvascompositing' id='2dcontext:canvascompositing'><c- n>CanvasCompositing</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-5'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasimagesmoothing' id='2dcontext:canvasimagesmoothing'><c- n>CanvasImageSmoothing</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-6'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasfillstrokestyles' id='2dcontext:canvasfillstrokestyles'><c- n>CanvasFillStrokeStyles</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-7'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasshadowstyles' id='2dcontext:canvasshadowstyles'><c- n>CanvasShadowStyles</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-8'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasfilters' id='2dcontext:canvasfilters'><c- n>CanvasFilters</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-9'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasrect' id='2dcontext:canvasrect'><c- n>CanvasRect</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-10'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasdrawpath' id='2dcontext:canvasdrawpath'><c- n>CanvasDrawPath</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-11'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasuserinterface' id='2dcontext:canvasuserinterface'><c- n>CanvasUserInterface</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-12'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvastext' id='2dcontext:canvastext'><c- n>CanvasText</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-13'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasdrawimage' id='2dcontext:canvasdrawimage'><c- n>CanvasDrawImage</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-14'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasimagedata' id='2dcontext:canvasimagedata'><c- n>CanvasImageData</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-15'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvaspathdrawingstyles' id='2dcontext:canvaspathdrawingstyles'><c- n>CanvasPathDrawingStyles</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-16'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvastextdrawingstyles' id='2dcontext:canvastextdrawingstyles'><c- n>CanvasTextDrawingStyles</c-></a>;
<a href='#canvasrenderingcontext2d' id='2dcontext:canvasrenderingcontext2d-17'><c- n>CanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvaspath' id='2dcontext:canvaspath'><c- n>CanvasPath</c-></a>;

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvassettings' data-dfn-type='interface'><c- g>CanvasSettings</c-></dfn> {
  // settings
  <a href='#canvasrenderingcontext2dsettings' id='2dcontext:canvasrenderingcontext2dsettings'><c- n>CanvasRenderingContext2DSettings</c-></a> <a href='#dom-context-2d-canvas-getcontextattributes' id='2dcontext:dom-context-2d-canvas-getcontextattributes'><c- g>getContextAttributes</c-></a>();
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasstate' data-dfn-type='interface'><c- g>CanvasState</c-></dfn> {
  // state
  <c- b>undefined</c-> <a href='#dom-context-2d-save' id='2dcontext:dom-context-2d-save'><c- g>save</c-></a>(); // push state on state stack
  <c- b>undefined</c-> <a href='#dom-context-2d-restore' id='2dcontext:dom-context-2d-restore'><c- g>restore</c-></a>(); // pop state stack and restore state
  <c- b>undefined</c-> <a href='#dom-context-2d-reset' id='2dcontext:dom-context-2d-reset'><c- g>reset</c-></a>(); // <a href='#reset-the-rendering-context-to-its-default-state' id='2dcontext:reset-the-rendering-context-to-its-default-state'>reset the rendering context to its default state</a>
  <c- b>boolean</c-> <a href='#dom-context-2d-iscontextlost' id='2dcontext:dom-context-2d-iscontextlost'><c- g>isContextLost</c-></a>(); // return whether context is lost
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvastransform' data-dfn-type='interface'><c- g>CanvasTransform</c-></dfn> {
  // transformations (default transform is the identity matrix)
  <c- b>undefined</c-> <a href='#dom-context-2d-scale' id='2dcontext:dom-context-2d-scale'><c- g>scale</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-rotate' id='2dcontext:dom-context-2d-rotate'><c- g>rotate</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>angle</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-translate' id='2dcontext:dom-context-2d-translate'><c- g>translate</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-transform' id='2dcontext:dom-context-2d-transform'><c- g>transform</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>a</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>b</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>c</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>d</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>e</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>f</c->);

  [<c- g>NewObject</c->] <a id='2dcontext:dommatrix' href='https://drafts.fxtf.org/geometry/#dommatrix' data-x-internal='dommatrix'><c- n>DOMMatrix</c-></a> <a href='#dom-context-2d-gettransform' id='2dcontext:dom-context-2d-gettransform'><c- g>getTransform</c-></a>();
  <c- b>undefined</c-> <a href='#dom-context-2d-settransform' id='2dcontext:dom-context-2d-settransform'><c- g>setTransform</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>a</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>b</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>c</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>d</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>e</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>f</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-settransform-matrix' id='2dcontext:dom-context-2d-settransform-matrix'><c- g>setTransform</c-></a>(<c- b>optional</c-> <a id='2dcontext:dommatrix2dinit' href='https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit' data-x-internal='dommatrix2dinit'><c- n>DOMMatrix2DInit</c-></a> <c- g>transform</c-> = {});
  <c- b>undefined</c-> <a href='#dom-context-2d-resettransform' id='2dcontext:dom-context-2d-resettransform'><c- g>resetTransform</c-></a>();

};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvascompositing' data-dfn-type='interface'><c- g>CanvasCompositing</c-></dfn> {
  // compositing
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-context-2d-globalalpha' id='2dcontext:dom-context-2d-globalalpha'><c- g>globalAlpha</c-></a>; // (default 1.0)
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-context-2d-globalcompositeoperation' id='2dcontext:dom-context-2d-globalcompositeoperation'><c- g>globalCompositeOperation</c-></a>; // (default &quot;source-over&quot;)
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasimagesmoothing' data-dfn-type='interface'><c- g>CanvasImageSmoothing</c-></dfn> {
  // image smoothing
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-context-2d-imagesmoothingenabled' id='2dcontext:dom-context-2d-imagesmoothingenabled'><c- g>imageSmoothingEnabled</c-></a>; // (default true)
  <c- b>attribute</c-> <a href='#imagesmoothingquality' id='2dcontext:imagesmoothingquality'><c- n>ImageSmoothingQuality</c-></a> <a href='#dom-context-2d-imagesmoothingquality' id='2dcontext:dom-context-2d-imagesmoothingquality'><c- g>imageSmoothingQuality</c-></a>; // (default low)

};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasfillstrokestyles' data-dfn-type='interface'><c- g>CanvasFillStrokeStyles</c-></dfn> {
  // colors and styles (see also the <a href='#canvaspathdrawingstyles' id='2dcontext:canvaspathdrawingstyles-2'>CanvasPathDrawingStyles</a> and <a href='#canvastextdrawingstyles' id='2dcontext:canvastextdrawingstyles-2'>CanvasTextDrawingStyles</a> interfaces)
  <c- b>attribute</c-> (<c- b>DOMString</c-> <c- b>or</c-> <c- n>CanvasGradient</c-> <c- b>or</c-> <c- n>CanvasPattern</c->) <a href='#dom-context-2d-strokestyle' id='2dcontext:dom-context-2d-strokestyle'><c- g>strokeStyle</c-></a>; // (default black)
  <c- b>attribute</c-> (<c- b>DOMString</c-> <c- b>or</c-> <c- n>CanvasGradient</c-> <c- b>or</c-> <c- n>CanvasPattern</c->) <a href='#dom-context-2d-fillstyle' id='2dcontext:dom-context-2d-fillstyle'><c- g>fillStyle</c-></a>; // (default black)
  <a href='#canvasgradient' id='2dcontext:canvasgradient'><c- n>CanvasGradient</c-></a> <a href='#dom-context-2d-createlineargradient' id='2dcontext:dom-context-2d-createlineargradient'><c- g>createLinearGradient</c-></a>(<c- b>double</c-> <c- g>x0</c->, <c- b>double</c-> <c- g>y0</c->, <c- b>double</c-> <c- g>x1</c->, <c- b>double</c-> <c- g>y1</c->);
  <a href='#canvasgradient' id='2dcontext:canvasgradient-2'><c- n>CanvasGradient</c-></a> <a href='#dom-context-2d-createradialgradient' id='2dcontext:dom-context-2d-createradialgradient'><c- g>createRadialGradient</c-></a>(<c- b>double</c-> <c- g>x0</c->, <c- b>double</c-> <c- g>y0</c->, <c- b>double</c-> <c- g>r0</c->, <c- b>double</c-> <c- g>x1</c->, <c- b>double</c-> <c- g>y1</c->, <c- b>double</c-> <c- g>r1</c->);
  <a href='#canvasgradient' id='2dcontext:canvasgradient-3'><c- n>CanvasGradient</c-></a> <a href='#dom-context-2d-createconicgradient' id='2dcontext:dom-context-2d-createconicgradient'><c- g>createConicGradient</c-></a>(<c- b>double</c-> <c- g>startAngle</c->, <c- b>double</c-> <c- g>x</c->, <c- b>double</c-> <c- g>y</c->);
  <a href='#canvaspattern' id='2dcontext:canvaspattern'><c- n>CanvasPattern</c-></a>? <a href='#dom-context-2d-createpattern' id='2dcontext:dom-context-2d-createpattern'><c- g>createPattern</c-></a>(<a href='#canvasimagesource' id='2dcontext:canvasimagesource'><c- n>CanvasImageSource</c-></a> <c- g>image</c->, [<a id='2dcontext:legacynulltoemptystring' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c-> <c- g>repetition</c->);

};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasshadowstyles' data-dfn-type='interface'><c- g>CanvasShadowStyles</c-></dfn> {
  // shadows
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-context-2d-shadowoffsetx' id='2dcontext:dom-context-2d-shadowoffsetx'><c- g>shadowOffsetX</c-></a>; // (default 0)
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-context-2d-shadowoffsety' id='2dcontext:dom-context-2d-shadowoffsety'><c- g>shadowOffsetY</c-></a>; // (default 0)
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-context-2d-shadowblur' id='2dcontext:dom-context-2d-shadowblur'><c- g>shadowBlur</c-></a>; // (default 0)
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-context-2d-shadowcolor' id='2dcontext:dom-context-2d-shadowcolor'><c- g>shadowColor</c-></a>; // (default <a id='2dcontext:transparent-black' href='https://drafts.csswg.org/css-color/#transparent-black' data-x-internal='transparent-black'>transparent black</a>)
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasfilters' data-dfn-type='interface'><c- g>CanvasFilters</c-></dfn> {
  // filters
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-context-2d-filter' id='2dcontext:dom-context-2d-filter'><c- g>filter</c-></a>; // (default &quot;none&quot;)
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasrect' data-dfn-type='interface'><c- g>CanvasRect</c-></dfn> {
  // rects
  <c- b>undefined</c-> <a href='#dom-context-2d-clearrect' id='2dcontext:dom-context-2d-clearrect'><c- g>clearRect</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>w</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>h</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-fillrect' id='2dcontext:dom-context-2d-fillrect'><c- g>fillRect</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>w</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>h</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-strokerect' id='2dcontext:dom-context-2d-strokerect'><c- g>strokeRect</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>w</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>h</c->);
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasdrawpath' data-dfn-type='interface'><c- g>CanvasDrawPath</c-></dfn> {
  // path API (see also <a href='#canvaspath' id='2dcontext:canvaspath-2'>CanvasPath</a>)
  <c- b>undefined</c-> <a href='#dom-context-2d-beginpath' id='2dcontext:dom-context-2d-beginpath'><c- g>beginPath</c-></a>();
  <c- b>undefined</c-> <a href='#dom-context-2d-fill' id='2dcontext:dom-context-2d-fill'><c- g>fill</c-></a>(<c- b>optional</c-> <a href='#canvasfillrule' id='2dcontext:canvasfillrule'><c- n>CanvasFillRule</c-></a> <c- g>fillRule</c-> = &quot;<a href='#dom-context-2d-fillrule-nonzero' id='2dcontext:dom-context-2d-fillrule-nonzero-2'>nonzero</a>&quot;);
  <c- b>undefined</c-> <a href='#dom-context-2d-fill-path' id='2dcontext:dom-context-2d-fill-path'><c- g>fill</c-></a>(<a href='#path2d' id='2dcontext:path2d'><c- n>Path2D</c-></a> <c- g>path</c->, <c- b>optional</c-> <a href='#canvasfillrule' id='2dcontext:canvasfillrule-2'><c- n>CanvasFillRule</c-></a> <c- g>fillRule</c-> = &quot;<a href='#dom-context-2d-fillrule-nonzero' id='2dcontext:dom-context-2d-fillrule-nonzero-3'>nonzero</a>&quot;);
  <c- b>undefined</c-> <a href='#dom-context-2d-stroke' id='2dcontext:dom-context-2d-stroke'><c- g>stroke</c-></a>();
  <c- b>undefined</c-> <a href='#dom-context-2d-stroke-path' id='2dcontext:dom-context-2d-stroke-path'><c- g>stroke</c-></a>(<a href='#path2d' id='2dcontext:path2d-2'><c- n>Path2D</c-></a> <c- g>path</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-clip' id='2dcontext:dom-context-2d-clip'><c- g>clip</c-></a>(<c- b>optional</c-> <a href='#canvasfillrule' id='2dcontext:canvasfillrule-3'><c- n>CanvasFillRule</c-></a> <c- g>fillRule</c-> = &quot;<a href='#dom-context-2d-fillrule-nonzero' id='2dcontext:dom-context-2d-fillrule-nonzero-4'>nonzero</a>&quot;);
  <c- b>undefined</c-> <a href='#dom-context-2d-clip-path' id='2dcontext:dom-context-2d-clip-path'><c- g>clip</c-></a>(<a href='#path2d' id='2dcontext:path2d-3'><c- n>Path2D</c-></a> <c- g>path</c->, <c- b>optional</c-> <a href='#canvasfillrule' id='2dcontext:canvasfillrule-4'><c- n>CanvasFillRule</c-></a> <c- g>fillRule</c-> = &quot;<a href='#dom-context-2d-fillrule-nonzero' id='2dcontext:dom-context-2d-fillrule-nonzero-5'>nonzero</a>&quot;);
  <c- b>boolean</c-> <a href='#dom-context-2d-ispointinpath' id='2dcontext:dom-context-2d-ispointinpath'><c- g>isPointInPath</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>optional</c-> <a href='#canvasfillrule' id='2dcontext:canvasfillrule-5'><c- n>CanvasFillRule</c-></a> <c- g>fillRule</c-> = &quot;<a href='#dom-context-2d-fillrule-nonzero' id='2dcontext:dom-context-2d-fillrule-nonzero-6'>nonzero</a>&quot;);
  <c- b>boolean</c-> <a href='#dom-context-2d-ispointinpath-path' id='2dcontext:dom-context-2d-ispointinpath-path'><c- g>isPointInPath</c-></a>(<a href='#path2d' id='2dcontext:path2d-4'><c- n>Path2D</c-></a> <c- g>path</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>optional</c-> <a href='#canvasfillrule' id='2dcontext:canvasfillrule-6'><c- n>CanvasFillRule</c-></a> <c- g>fillRule</c-> = &quot;<a href='#dom-context-2d-fillrule-nonzero' id='2dcontext:dom-context-2d-fillrule-nonzero-7'>nonzero</a>&quot;);
  <c- b>boolean</c-> <a href='#dom-context-2d-ispointinstroke' id='2dcontext:dom-context-2d-ispointinstroke'><c- g>isPointInStroke</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
  <c- b>boolean</c-> <a href='#dom-context-2d-ispointinstroke-path' id='2dcontext:dom-context-2d-ispointinstroke-path'><c- g>isPointInStroke</c-></a>(<a href='#path2d' id='2dcontext:path2d-5'><c- n>Path2D</c-></a> <c- g>path</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasuserinterface' data-dfn-type='interface'><c- g>CanvasUserInterface</c-></dfn> {
  <c- b>undefined</c-> <a href='#dom-context-2d-drawfocusifneeded' id='2dcontext:dom-context-2d-drawfocusifneeded'><c- g>drawFocusIfNeeded</c-></a>(<a id='2dcontext:element' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a> <c- g>element</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-drawfocusifneeded-path-element' id='2dcontext:dom-context-2d-drawfocusifneeded-path-element'><c- g>drawFocusIfNeeded</c-></a>(<a href='#path2d' id='2dcontext:path2d-6'><c- n>Path2D</c-></a> <c- g>path</c->, <a id='2dcontext:element-2' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a> <c- g>element</c->);
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvastext' data-dfn-type='interface'><c- g>CanvasText</c-></dfn> {
  // text (see also the <a href='#canvaspathdrawingstyles' id='2dcontext:canvaspathdrawingstyles-3'>CanvasPathDrawingStyles</a> and <a href='#canvastextdrawingstyles' id='2dcontext:canvastextdrawingstyles-3'>CanvasTextDrawingStyles</a> interfaces)
  <c- b>undefined</c-> <a href='#dom-context-2d-filltext' id='2dcontext:dom-context-2d-filltext'><c- g>fillText</c-></a>(<c- b>DOMString</c-> <c- g>text</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>optional</c-> <c- b>unrestricted</c-> <c- b>double</c-> <c- g>maxWidth</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-stroketext' id='2dcontext:dom-context-2d-stroketext'><c- g>strokeText</c-></a>(<c- b>DOMString</c-> <c- g>text</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>optional</c-> <c- b>unrestricted</c-> <c- b>double</c-> <c- g>maxWidth</c->);
  <a href='#textmetrics' id='2dcontext:textmetrics'><c- n>TextMetrics</c-></a> <a href='#dom-context-2d-measuretext' id='2dcontext:dom-context-2d-measuretext'><c- g>measureText</c-></a>(<c- b>DOMString</c-> <c- g>text</c->);
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasdrawimage' data-dfn-type='interface'><c- g>CanvasDrawImage</c-></dfn> {
  // drawing images
  <c- b>undefined</c-> <a href='#dom-context-2d-drawimage' id='2dcontext:dom-context-2d-drawimage'><c- g>drawImage</c-></a>(<a href='#canvasimagesource' id='2dcontext:canvasimagesource-2'><c- n>CanvasImageSource</c-></a> <c- g>image</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dx</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dy</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-drawimage' id='2dcontext:dom-context-2d-drawimage-2'><c- g>drawImage</c-></a>(<a href='#canvasimagesource' id='2dcontext:canvasimagesource-3'><c- n>CanvasImageSource</c-></a> <c- g>image</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dx</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dy</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dw</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dh</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-drawimage' id='2dcontext:dom-context-2d-drawimage-3'><c- g>drawImage</c-></a>(<a href='#canvasimagesource' id='2dcontext:canvasimagesource-4'><c- n>CanvasImageSource</c-></a> <c- g>image</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>sx</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>sy</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>sw</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>sh</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dx</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dy</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dw</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>dh</c->);
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvasimagedata' data-dfn-type='interface'><c- g>CanvasImageData</c-></dfn> {
  // <a href='#pixel-manipulation' id='2dcontext:pixel-manipulation'>pixel manipulation</a>
  <a id='2dcontext:imagedata' href='imagebitmap-and-animations.html#imagedata'><c- n>ImageData</c-></a> <a href='#dom-context-2d-createimagedata' id='2dcontext:dom-context-2d-createimagedata'><c- g>createImageData</c-></a>([<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>sw</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>sh</c->, <c- b>optional</c-> <a id='2dcontext:imagedatasettings' href='imagebitmap-and-animations.html#imagedatasettings'><c- n>ImageDataSettings</c-></a> <c- g>settings</c-> = {});
  <a id='2dcontext:imagedata-2' href='imagebitmap-and-animations.html#imagedata'><c- n>ImageData</c-></a> <a href='#dom-context-2d-createimagedata-imagedata' id='2dcontext:dom-context-2d-createimagedata-imagedata'><c- g>createImageData</c-></a>(<a id='2dcontext:imagedata-3' href='imagebitmap-and-animations.html#imagedata'><c- n>ImageData</c-></a> <c- g>imageData</c->);
  <a id='2dcontext:imagedata-4' href='imagebitmap-and-animations.html#imagedata'><c- n>ImageData</c-></a> <a href='#dom-context-2d-getimagedata' id='2dcontext:dom-context-2d-getimagedata'><c- g>getImageData</c-></a>([<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>sx</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>sy</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>sw</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>sh</c->, <c- b>optional</c-> <a id='2dcontext:imagedatasettings-2' href='imagebitmap-and-animations.html#imagedatasettings'><c- n>ImageDataSettings</c-></a> <c- g>settings</c-> = {});
  <c- b>undefined</c-> <a href='#dom-context-2d-putimagedata-short' id='2dcontext:dom-context-2d-putimagedata-short'><c- g>putImageData</c-></a>(<a id='2dcontext:imagedata-5' href='imagebitmap-and-animations.html#imagedata'><c- n>ImageData</c-></a> <c- g>imageData</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dx</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dy</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-putimagedata' id='2dcontext:dom-context-2d-putimagedata'><c- g>putImageData</c-></a>(<a id='2dcontext:imagedata-6' href='imagebitmap-and-animations.html#imagedata'><c- n>ImageData</c-></a> <c- g>imageData</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dx</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dy</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dirtyX</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dirtyY</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dirtyWidth</c->, [<c- g>EnforceRange</c->] <c- b>long</c-> <c- g>dirtyHeight</c->);
};

<c- b>enum</c-> <dfn id='canvaslinecap' data-dfn-type='enum'><c- g>CanvasLineCap</c-></dfn> { <c- s>&quot;butt&quot;</c->, <c- s>&quot;round&quot;</c->, <c- s>&quot;square&quot;</c-> };
<c- b>enum</c-> <dfn id='canvaslinejoin' data-dfn-type='enum'><c- g>CanvasLineJoin</c-></dfn> { <c- s>&quot;round&quot;</c->, <c- s>&quot;bevel&quot;</c->, <c- s>&quot;miter&quot;</c-> };
<c- b>enum</c-> <dfn id='canvastextalign' data-dfn-type='enum'><c- g>CanvasTextAlign</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-textalign-start' id='2dcontext:dom-context-2d-textalign-start'><c- s>start</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textalign-end' id='2dcontext:dom-context-2d-textalign-end'><c- s>end</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textalign-left' id='2dcontext:dom-context-2d-textalign-left'><c- s>left</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textalign-right' id='2dcontext:dom-context-2d-textalign-right'><c- s>right</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textalign-center' id='2dcontext:dom-context-2d-textalign-center'><c- s>center</c-></a><c- s>&quot;</c-> };
<c- b>enum</c-> <dfn id='canvastextbaseline' data-dfn-type='enum'><c- g>CanvasTextBaseline</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-textbaseline-top' id='2dcontext:dom-context-2d-textbaseline-top'><c- s>top</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textbaseline-hanging' id='2dcontext:dom-context-2d-textbaseline-hanging'><c- s>hanging</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textbaseline-middle' id='2dcontext:dom-context-2d-textbaseline-middle'><c- s>middle</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textbaseline-alphabetic' id='2dcontext:dom-context-2d-textbaseline-alphabetic'><c- s>alphabetic</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textbaseline-ideographic' id='2dcontext:dom-context-2d-textbaseline-ideographic'><c- s>ideographic</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textbaseline-bottom' id='2dcontext:dom-context-2d-textbaseline-bottom'><c- s>bottom</c-></a><c- s>&quot;</c-> };
<c- b>enum</c-> <dfn id='canvasdirection' data-dfn-type='enum'><c- g>CanvasDirection</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-direction-ltr' id='2dcontext:dom-context-2d-direction-ltr'><c- s>ltr</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-direction-rtl' id='2dcontext:dom-context-2d-direction-rtl'><c- s>rtl</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-direction-inherit' id='2dcontext:dom-context-2d-direction-inherit'><c- s>inherit</c-></a><c- s>&quot;</c-> };
<c- b>enum</c-> <dfn id='canvasfontkerning' data-dfn-type='enum'><c- g>CanvasFontKerning</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-fontkerning-auto' id='2dcontext:dom-context-2d-fontkerning-auto'><c- s>auto</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontkerning-normal' id='2dcontext:dom-context-2d-fontkerning-normal'><c- s>normal</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontkerning-none' id='2dcontext:dom-context-2d-fontkerning-none'><c- s>none</c-></a><c- s>&quot;</c-> };
<c- b>enum</c-> <dfn id='canvasfontstretch' data-dfn-type='enum'><c- g>CanvasFontStretch</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-ultra-condensed' id='2dcontext:dom-context-2d-fontstretch-ultra-condensed'><c- s>ultra-condensed</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-extra-condensed' id='2dcontext:dom-context-2d-fontstretch-extra-condensed'><c- s>extra-condensed</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-condensed' id='2dcontext:dom-context-2d-fontstretch-condensed'><c- s>condensed</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-semi-condensed' id='2dcontext:dom-context-2d-fontstretch-semi-condensed'><c- s>semi-condensed</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-normal' id='2dcontext:dom-context-2d-fontstretch-normal'><c- s>normal</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-semi-expanded' id='2dcontext:dom-context-2d-fontstretch-semi-expanded'><c- s>semi-expanded</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-expanded' id='2dcontext:dom-context-2d-fontstretch-expanded'><c- s>expanded</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-extra-expanded' id='2dcontext:dom-context-2d-fontstretch-extra-expanded'><c- s>extra-expanded</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontstretch-ultra-expanded' id='2dcontext:dom-context-2d-fontstretch-ultra-expanded'><c- s>ultra-expanded</c-></a><c- s>&quot;</c-> };
<c- b>enum</c-> <dfn id='canvasfontvariantcaps' data-dfn-type='enum'><c- g>CanvasFontVariantCaps</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-fontvariantcaps-normal' id='2dcontext:dom-context-2d-fontvariantcaps-normal'><c- s>normal</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontvariantcaps-small-caps' id='2dcontext:dom-context-2d-fontvariantcaps-small-caps'><c- s>small-caps</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontvariantcaps-all-small-caps' id='2dcontext:dom-context-2d-fontvariantcaps-all-small-caps'><c- s>all-small-caps</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontvariantcaps-petite-caps' id='2dcontext:dom-context-2d-fontvariantcaps-petite-caps'><c- s>petite-caps</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontvariantcaps-all-petite-caps' id='2dcontext:dom-context-2d-fontvariantcaps-all-petite-caps'><c- s>all-petite-caps</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontvariantcaps-unicase' id='2dcontext:dom-context-2d-fontvariantcaps-unicase'><c- s>unicase</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-fontvariantcaps-titling-caps' id='2dcontext:dom-context-2d-fontvariantcaps-titling-caps'><c- s>titling-caps</c-></a><c- s>&quot;</c-> };
<c- b>enum</c-> <dfn id='canvastextrendering' data-dfn-type='enum'><c- g>CanvasTextRendering</c-></dfn> { <c- s>&quot;</c-><a href='#dom-context-2d-textrendering-auto' id='2dcontext:dom-context-2d-textrendering-auto'><c- s>auto</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textrendering-optimizespeed' id='2dcontext:dom-context-2d-textrendering-optimizespeed'><c- s>optimizeSpeed</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textrendering-optimizelegibility' id='2dcontext:dom-context-2d-textrendering-optimizelegibility'><c- s>optimizeLegibility</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-context-2d-textrendering-geometricprecision' id='2dcontext:dom-context-2d-textrendering-geometricprecision'><c- s>geometricPrecision</c-></a><c- s>&quot;</c-> };

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvaspathdrawingstyles' data-dfn-type='interface'><c- g>CanvasPathDrawingStyles</c-></dfn> {
  // line caps/joins
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-context-2d-linewidth' id='2dcontext:dom-context-2d-linewidth'><c- g>lineWidth</c-></a>; // (default 1)
  <c- b>attribute</c-> <a href='#canvaslinecap' id='2dcontext:canvaslinecap'><c- n>CanvasLineCap</c-></a> <a href='#dom-context-2d-linecap' id='2dcontext:dom-context-2d-linecap'><c- g>lineCap</c-></a>; // (default &quot;butt&quot;)
  <c- b>attribute</c-> <a href='#canvaslinejoin' id='2dcontext:canvaslinejoin'><c- n>CanvasLineJoin</c-></a> <a href='#dom-context-2d-linejoin' id='2dcontext:dom-context-2d-linejoin'><c- g>lineJoin</c-></a>; // (default &quot;miter&quot;)
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-context-2d-miterlimit' id='2dcontext:dom-context-2d-miterlimit'><c- g>miterLimit</c-></a>; // (default 10)

  // dashed lines
  <c- b>undefined</c-> <a href='#dom-context-2d-setlinedash' id='2dcontext:dom-context-2d-setlinedash'><c- g>setLineDash</c-></a>(<c- b>sequence</c->&lt;<c- b>unrestricted</c-> <c- b>double</c->&gt; <c- g>segments</c->); // default empty
  <c- b>sequence</c->&lt;<c- b>unrestricted</c-> <c- b>double</c->&gt; <a href='#dom-context-2d-getlinedash' id='2dcontext:dom-context-2d-getlinedash'><c- g>getLineDash</c-></a>();
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-context-2d-linedashoffset' id='2dcontext:dom-context-2d-linedashoffset'><c- g>lineDashOffset</c-></a>;
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvastextdrawingstyles' data-dfn-type='interface'><c- g>CanvasTextDrawingStyles</c-></dfn> {
  // text
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-context-2d-lang' id='2dcontext:dom-context-2d-lang'><c- g>lang</c-></a>; // (default: &quot;inherit&quot;)
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-context-2d-font' id='2dcontext:dom-context-2d-font'><c- g>font</c-></a>; // (default 10px sans-serif)
  <c- b>attribute</c-> <a href='#canvastextalign' id='2dcontext:canvastextalign'><c- n>CanvasTextAlign</c-></a> <a href='#dom-context-2d-textalign' id='2dcontext:dom-context-2d-textalign'><c- g>textAlign</c-></a>; // (default: &quot;start&quot;)
  <c- b>attribute</c-> <a href='#canvastextbaseline' id='2dcontext:canvastextbaseline'><c- n>CanvasTextBaseline</c-></a> <a href='#dom-context-2d-textbaseline' id='2dcontext:dom-context-2d-textbaseline'><c- g>textBaseline</c-></a>; // (default: &quot;alphabetic&quot;)
  <c- b>attribute</c-> <a href='#canvasdirection' id='2dcontext:canvasdirection'><c- n>CanvasDirection</c-></a> <a href='#dom-context-2d-direction' id='2dcontext:dom-context-2d-direction'><c- g>direction</c-></a>; // (default: &quot;inherit&quot;)
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-context-2d-letterspacing' id='2dcontext:dom-context-2d-letterspacing'><c- g>letterSpacing</c-></a>; // (default: &quot;0px&quot;)
  <c- b>attribute</c-> <a href='#canvasfontkerning' id='2dcontext:canvasfontkerning'><c- n>CanvasFontKerning</c-></a> <a href='#dom-context-2d-fontkerning' id='2dcontext:dom-context-2d-fontkerning'><c- g>fontKerning</c-></a>; // (default: &quot;auto&quot;)
  <c- b>attribute</c-> <a href='#canvasfontstretch' id='2dcontext:canvasfontstretch'><c- n>CanvasFontStretch</c-></a> <a href='#dom-context-2d-fontstretch' id='2dcontext:dom-context-2d-fontstretch'><c- g>fontStretch</c-></a>; // (default: &quot;normal&quot;)
  <c- b>attribute</c-> <a href='#canvasfontvariantcaps' id='2dcontext:canvasfontvariantcaps'><c- n>CanvasFontVariantCaps</c-></a> <a href='#dom-context-2d-fontvariantcaps' id='2dcontext:dom-context-2d-fontvariantcaps'><c- g>fontVariantCaps</c-></a>; // (default: &quot;normal&quot;)
  <c- b>attribute</c-> <a href='#canvastextrendering' id='2dcontext:canvastextrendering'><c- n>CanvasTextRendering</c-></a> <a href='#dom-context-2d-textrendering' id='2dcontext:dom-context-2d-textrendering'><c- g>textRendering</c-></a>; // (default: &quot;auto&quot;)
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-context-2d-wordspacing' id='2dcontext:dom-context-2d-wordspacing'><c- g>wordSpacing</c-></a>; // (default: &quot;0px&quot;)
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='canvaspath' data-dfn-type='interface'><c- g>CanvasPath</c-></dfn> {
  // shared path API methods
  <c- b>undefined</c-> <a href='#dom-context-2d-closepath' id='2dcontext:dom-context-2d-closepath'><c- g>closePath</c-></a>();
  <c- b>undefined</c-> <a href='#dom-context-2d-moveto' id='2dcontext:dom-context-2d-moveto'><c- g>moveTo</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-lineto' id='2dcontext:dom-context-2d-lineto'><c- g>lineTo</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-quadraticcurveto' id='2dcontext:dom-context-2d-quadraticcurveto'><c- g>quadraticCurveTo</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>cpx</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>cpy</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-beziercurveto' id='2dcontext:dom-context-2d-beziercurveto'><c- g>bezierCurveTo</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>cp1x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>cp1y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>cp2x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>cp2y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-arcto' id='2dcontext:dom-context-2d-arcto'><c- g>arcTo</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x1</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y1</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>x2</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y2</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>radius</c->); 
  <c- b>undefined</c-> <a href='#dom-context-2d-rect' id='2dcontext:dom-context-2d-rect'><c- g>rect</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>w</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>h</c->);
  <c- b>undefined</c-> <a href='#dom-context-2d-roundrect' id='2dcontext:dom-context-2d-roundrect'><c- g>roundRect</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>w</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>h</c->, <c- b>optional</c-> (<c- b>unrestricted</c-> <c- b>double</c-> <c- b>or</c-> <a id='2dcontext:dompointinit' href='https://drafts.fxtf.org/geometry/#dictdef-dompointinit' data-x-internal='dompointinit'><c- n>DOMPointInit</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;(<c- b>unrestricted</c-> <c- b>double</c-> <c- b>or</c-> <a id='2dcontext:dompointinit-2' href='https://drafts.fxtf.org/geometry/#dictdef-dompointinit' data-x-internal='dompointinit'><c- n>DOMPointInit</c-></a>)&gt;) <c- g>radii</c-> = 0);
  <c- b>undefined</c-> <a href='#dom-context-2d-arc' id='2dcontext:dom-context-2d-arc'><c- g>arc</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>radius</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>startAngle</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>endAngle</c->, <c- b>optional</c-> <c- b>boolean</c-> <c- g>counterclockwise</c-> = <c- b>false</c->); 
  <c- b>undefined</c-> <a href='#dom-context-2d-ellipse' id='2dcontext:dom-context-2d-ellipse'><c- g>ellipse</c-></a>(<c- b>unrestricted</c-> <c- b>double</c-> <c- g>x</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>y</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>radiusX</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>radiusY</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>rotation</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>startAngle</c->, <c- b>unrestricted</c-> <c- b>double</c-> <c- g>endAngle</c->, <c- b>optional</c-> <c- b>boolean</c-> <c- g>counterclockwise</c-> = <c- b>false</c->); 
};

[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn id='canvasgradient' data-dfn-type='interface'><c- g>CanvasGradient</c-></dfn> {
  // opaque object
  <c- b>undefined</c-> <a href='#dom-canvasgradient-addcolorstop' id='2dcontext:dom-canvasgradient-addcolorstop'><c- g>addColorStop</c-></a>(<c- b>double</c-> <c- g>offset</c->, <c- b>DOMString</c-> <c- g>color</c->);
};

[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn id='canvaspattern' data-dfn-type='interface'><c- g>CanvasPattern</c-></dfn> {
  // opaque object
  <c- b>undefined</c-> <a href='#dom-canvaspattern-settransform' id='2dcontext:dom-canvaspattern-settransform'><c- g>setTransform</c-></a>(<c- b>optional</c-> <a id='2dcontext:dommatrix2dinit-2' href='https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit' data-x-internal='dommatrix2dinit'><c- n>DOMMatrix2DInit</c-></a> <c- g>transform</c-> = {});
};

[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn id='textmetrics' data-dfn-type='interface'><c- g>TextMetrics</c-></dfn> {
  // x-direction
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-width' id='2dcontext:dom-textmetrics-width'><c- g>width</c-></a>; // advance width
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-actualboundingboxleft' id='2dcontext:dom-textmetrics-actualboundingboxleft'><c- g>actualBoundingBoxLeft</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-actualboundingboxright' id='2dcontext:dom-textmetrics-actualboundingboxright'><c- g>actualBoundingBoxRight</c-></a>;

  // y-direction
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-fontboundingboxascent' id='2dcontext:dom-textmetrics-fontboundingboxascent'><c- g>fontBoundingBoxAscent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-fontboundingboxdescent' id='2dcontext:dom-textmetrics-fontboundingboxdescent'><c- g>fontBoundingBoxDescent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-actualboundingboxascent' id='2dcontext:dom-textmetrics-actualboundingboxascent'><c- g>actualBoundingBoxAscent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-actualboundingboxdescent' id='2dcontext:dom-textmetrics-actualboundingboxdescent'><c- g>actualBoundingBoxDescent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-emheightascent' id='2dcontext:dom-textmetrics-emheightascent'><c- g>emHeightAscent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-emheightdescent' id='2dcontext:dom-textmetrics-emheightdescent'><c- g>emHeightDescent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-hangingbaseline' id='2dcontext:dom-textmetrics-hangingbaseline'><c- g>hangingBaseline</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-alphabeticbaseline' id='2dcontext:dom-textmetrics-alphabeticbaseline'><c- g>alphabeticBaseline</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-textmetrics-ideographicbaseline' id='2dcontext:dom-textmetrics-ideographicbaseline'><c- g>ideographicBaseline</c-></a>;
};

[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn id='path2d' data-dfn-type='interface'><c- g>Path2D</c-></dfn> {
  <a href='#dom-path2d' id='2dcontext:dom-path2d'><c- g>constructor</c-></a>(<c- b>optional</c-> (<a href='#path2d' id='2dcontext:path2d-7'><c- n>Path2D</c-></a> <c- b>or</c-> <c- b>DOMString</c->) <c- g>path</c->);

  <c- b>undefined</c-> <a href='#dom-path2d-addpath' id='2dcontext:dom-path2d-addpath'><c- g>addPath</c-></a>(<a href='#path2d' id='2dcontext:path2d-8'><c- n>Path2D</c-></a> <c- g>path</c->, <c- b>optional</c-> <a id='2dcontext:dommatrix2dinit-3' href='https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit' data-x-internal='dommatrix2dinit'><c- n>DOMMatrix2DInit</c-></a> <c- g>transform</c-> = {});
};
<a href='#path2d' id='2dcontext:path2d-9'><c- n>Path2D</c-></a> <c- b>includes</c-> <a href='#canvaspath' id='2dcontext:canvaspath-3'><c- n>CanvasPath</c-></a>;</code></pre>

 

  <p class=note>To maintain compatibility with existing web content, user agents need to
  enumerate methods defined in <code id=2dcontext:canvasuserinterface-2><a href=#canvasuserinterface>CanvasUserInterface</a></code> immediately after the <code id=2dcontext:dom-context-2d-stroke-2><a href=#dom-context-2d-stroke>stroke()</a></code> method on <code id=2dcontext:canvasrenderingcontext2d-18><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
  objects.</p>

  <dl class=domintro><dt><code><var>context</var> = <var>canvas</var>.<a href=#dom-canvas-getcontext id=2dcontext:dom-canvas-getcontext>getContext</a>('2d' [, { [ <a href=#dom-canvasrenderingcontext2dsettings-alpha id=2dcontext:dom-canvasrenderingcontext2dsettings-alpha-2>alpha</a>: true ] [, <a href=#dom-canvasrenderingcontext2dsettings-desynchronized id=2dcontext:dom-canvasrenderingcontext2dsettings-desynchronized-2>desynchronized</a>: false ] [, <a href=#dom-canvasrenderingcontext2dsettings-colorspace id=2dcontext:dom-canvasrenderingcontext2dsettings-colorspace-2>colorSpace</a>: 'srgb'] [, <a href=#dom-canvasrenderingcontext2dsettings-willreadfrequently id=2dcontext:dom-canvasrenderingcontext2dsettings-willreadfrequently-2>willReadFrequently</a>: false ]} ])</code><dd>
    <p>Returns a <code id=2dcontext:canvasrenderingcontext2d-19><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object that is permanently bound to a
    particular <code id=2dcontext:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element.</p>

    <p>If the <code id=2dcontext:dom-canvasrenderingcontext2dsettings-alpha-3><a href=#dom-canvasrenderingcontext2dsettings-alpha>alpha</a></code> member is
    false, then the context is forced to always be opaque.</p>

    <p>If the <code id=2dcontext:dom-canvasrenderingcontext2dsettings-desynchronized-3><a href=#dom-canvasrenderingcontext2dsettings-desynchronized>desynchronized</a></code> member is
    true, then the context might be <a href=#concept-canvas-desynchronized id=2dcontext:concept-canvas-desynchronized>desynchronized</a>.</p>

    <p>The <code id=2dcontext:dom-canvasrenderingcontext2dsettings-colorspace-3><a href=#dom-canvasrenderingcontext2dsettings-colorspace>colorSpace</a></code> member
    specifies the <a href=#concept-canvas-color-space id=2dcontext:concept-canvas-color-space>color space</a> of the rendering
    context.</p>

    <p>The <code id=2dcontext:dom-canvasrenderingcontext2dsettings-colortype-2><a href=#dom-canvasrenderingcontext2dsettings-colortype>colorType</a></code> member
    specifies the <a href=#concept-canvas-color-type id=2dcontext:concept-canvas-color-type>color type</a> of the rendering
    context.</p>

    <p>If the <code id=2dcontext:dom-canvasrenderingcontext2dsettings-willreadfrequently-3><a href=#dom-canvasrenderingcontext2dsettings-willreadfrequently>willReadFrequently</a></code>
    member is true, then the context is marked for <a href=#concept-canvas-will-read-frequently id=2dcontext:concept-canvas-will-read-frequently>readback optimization</a>.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-canvas id=dom-context-2d-canvas-dev>canvas</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/canvas title="The CanvasRenderingContext2D.canvas property, part of the Canvas API, is a read-only reference to the HTMLCanvasElement object that is associated with a given context. It might be null if there is no associated <canvas> element.">CanvasRenderingContext2D/canvas</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns the <code id=2dcontext:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> element.<dt><code><var>attributes</var> = <var>context</var>.<a href=#dom-context-2d-canvas-getcontextattributes id=2dcontext:dom-context-2d-canvas-getcontextattributes-2>getContextAttributes</a>()</code><dd>
    <p>Returns an object whose:</p>

    <ul><li><code id=2dcontext:concept-canvas-alpha><a href=#concept-canvas-alpha>alpha</a></code> member is true if the context has an alpha
     component that is not 1.0; otherwise false.<li><code id=2dcontext:dom-canvasrenderingcontext2dsettings-desynchronized-4><a href=#dom-canvasrenderingcontext2dsettings-desynchronized>desynchronized</a></code>
     member is true if the context can be <a href=#concept-canvas-desynchronized id=2dcontext:concept-canvas-desynchronized-2>desynchronized</a>.<li><code id=2dcontext:dom-canvasrenderingcontext2dsettings-colorspace-4><a href=#dom-canvasrenderingcontext2dsettings-colorspace>colorSpace</a></code> member is
     a string indicating the context's <a href=#concept-canvas-color-space id=2dcontext:concept-canvas-color-space-2>color
     space</a>.<li><code id=2dcontext:dom-canvasrenderingcontext2dsettings-colortype-3><a href=#dom-canvasrenderingcontext2dsettings-colortype>colorType</a></code> member is
     a string indicating the context's <a href=#concept-canvas-color-type id=2dcontext:concept-canvas-color-type-2>color
     type</a>.<li><code id=2dcontext:dom-canvasrenderingcontext2dsettings-willreadfrequently-4><a href=#dom-canvasrenderingcontext2dsettings-willreadfrequently>willReadFrequently</a></code>
     member is true if the context is marked for <a href=#concept-canvas-will-read-frequently id=2dcontext:concept-canvas-will-read-frequently-2>readback
     optimization</a>.</ul>
   </dl>

  

  <hr>

  <p>The <code id=2dcontext:canvasrenderingcontext2d-20><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> 2D rendering context represents a flat linear
  Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having
  <var>x</var> values increasing when going right, and <var>y</var> values increasing when going
  down. The <var>x</var>-coordinate of the right-most edge is equal to the width of the rendering
  context's <a href=#output-bitmap id=2dcontext:output-bitmap>output bitmap</a> in <a href=https://drafts.csswg.org/css-values/#px id="2dcontext:'px'" data-x-internal="'px'">CSS pixels</a>; similarly, the
  <var>y</var>-coordinate of the bottom-most edge is equal to the height of the rendering context's
  <a href=#output-bitmap id=2dcontext:output-bitmap-2>output bitmap</a> in <a href=https://drafts.csswg.org/css-values/#px id="2dcontext:'px'-2" data-x-internal="'px'">CSS pixels</a>.</p>

  <p>The size of the coordinate space does not necessarily represent the size of the actual bitmaps
  that the user agent will use internally or during rendering. On high-definition displays, for
  instance, the user agent may internally use bitmaps with four device pixels per unit in the
  coordinate space, so that the rendering remains at high quality throughout. Anti-aliasing can
  similarly be implemented using oversampling with bitmaps of a higher resolution than the final
  image on the display.</p>

  <div class=example>
   <p>Using <a href=https://drafts.csswg.org/css-values/#px id="2dcontext:'px'-3" data-x-internal="'px'">CSS pixels</a> to describe the size of a rendering context's
   <a href=#output-bitmap id=2dcontext:output-bitmap-3>output bitmap</a> does not mean that when rendered the canvas will cover an equivalent
   area in <a href=https://drafts.csswg.org/css-values/#px id="2dcontext:'px'-4" data-x-internal="'px'">CSS pixels</a>. <a href=https://drafts.csswg.org/css-values/#px id="2dcontext:'px'-5" data-x-internal="'px'">CSS pixels</a> are reused
   for ease of integration with CSS features, such as text layout.</p>

   <p>In other words, the <code id=2dcontext:the-canvas-element-3><a href=#the-canvas-element>canvas</a></code> element below's rendering context has a 200x200
   <a href=#output-bitmap id=2dcontext:output-bitmap-4>output bitmap</a> (which internally uses <a href=https://drafts.csswg.org/css-values/#px id="2dcontext:'px'-6" data-x-internal="'px'">CSS pixels</a> as a
   unit for ease of integration with CSS) and is rendered as 100x100 <a href=https://drafts.csswg.org/css-values/#px id="2dcontext:'px'-7" data-x-internal="'px'">CSS
   pixels</a>:

   <pre><code class='html'><c- p>&lt;</c-><c- f>canvas</c-> <c- e>width</c-><c- o>=</c-><c- s>200</c-> <c- e>height</c-><c- o>=</c-><c- s>200</c-> <c- e>style</c-><c- o>=</c-><c- s>width:100px;height:100px</c-><c- p>&gt;</c-></code></pre>
  </div>

  <hr>

  <p>The <dfn id=2d-context-creation-algorithm>2D context creation algorithm</dfn>, which is passed a <var>target</var> (a
  <code id=2dcontext:the-canvas-element-4><a href=#the-canvas-element>canvas</a></code> element) and <var>options</var>, consists of running these steps:</p>

  <ol><li><p>Let <var>settings</var> be the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=2dcontext:concept-idl-convert data-x-internal=concept-idl-convert>converting</a> <var>options</var> to the dictionary type
   <code id=2dcontext:canvasrenderingcontext2dsettings-2><a href=#canvasrenderingcontext2dsettings>CanvasRenderingContext2DSettings</a></code>. (This can throw an exception.)<li><p>Let <var>context</var> be a new <code id=2dcontext:canvasrenderingcontext2d-21><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.<li><p>Initialize <var>context</var>'s <code id=2dcontext:dom-context-2d-canvas-2><a href=#dom-context-2d-canvas>canvas</a></code>
   attribute to point to <var>target</var>.<li><p>Set <var>context</var>'s <a href=#output-bitmap id=2dcontext:output-bitmap-5>output bitmap</a> to the same bitmap as
   <var>target</var>'s bitmap (so that they are shared).<li><p><a href=#concept-canvas-set-bitmap-dimensions id=2dcontext:concept-canvas-set-bitmap-dimensions>Set bitmap dimensions</a> to
   <a href=#obtain-numeric-values id=2dcontext:obtain-numeric-values>the numeric values</a> of <var>target</var>'s <code id=2dcontext:attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code id=2dcontext:attr-canvas-height><a href=#attr-canvas-height>height</a></code>
   content attributes.<li><p>Run the <a href=#canvas-setting-init-bitmap id=2dcontext:canvas-setting-init-bitmap>canvas settings output bitmap
   initialization algorithm</a>, given <var>context</var> and <var>settings</var>.<li><p>Return <var>context</var>.</ol>

  <hr>

  <p>When the user agent is to <dfn id=concept-canvas-set-bitmap-dimensions>set bitmap
  dimensions</dfn> to <var>width</var> and <var>height</var>, it must run these steps:</p>

  <ol><li><p><a href=#reset-the-rendering-context-to-its-default-state id=2dcontext:reset-the-rendering-context-to-its-default-state-2>Reset the rendering context to its default state</a>.<li><p>Resize the <a href=#output-bitmap id=2dcontext:output-bitmap-6>output bitmap</a> to the new <var>width</var> and
   <var>height</var>.<li><p>Let <var>canvas</var> be the <code id=2dcontext:the-canvas-element-5><a href=#the-canvas-element>canvas</a></code> element to which the rendering
   context's <code id=2dcontext:dom-context-2d-canvas-3><a href=#dom-context-2d-canvas>canvas</a></code> attribute was initialized.<li><p>If <a href=#obtain-numeric-values id=2dcontext:obtain-numeric-values-2>the numeric value</a> of
   <var>canvas</var>'s <code id=2dcontext:attr-canvas-width-2><a href=#attr-canvas-width>width</a></code> content
   attribute differs from <var>width</var>, then set <var>canvas</var>'s <code id=2dcontext:attr-canvas-width-3><a href=#attr-canvas-width>width</a></code> content attribute to the shortest possible string
   representing <var>width</var> as a <a id=2dcontext:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>.<li><p>If <a href=#obtain-numeric-values id=2dcontext:obtain-numeric-values-3>the numeric value</a> of
   <var>canvas</var>'s <code id=2dcontext:attr-canvas-height-2><a href=#attr-canvas-height>height</a></code> content
   attribute differs from <var>height</var>, then set <var>canvas</var>'s <code id=2dcontext:attr-canvas-height-3><a href=#attr-canvas-height>height</a></code> content attribute to the shortest possible string
   representing <var>height</var> as a <a id=2dcontext:valid-non-negative-integer-2 href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>.</ol>

  <div class=example>
   <p>Only one square appears to be drawn in the following example:</p>
   <pre><code class='js'><c- c1>// canvas is a reference to a &lt;canvas&gt; element</c->
<c- a>var</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->
context<c- p>.</c->fillRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-><c- mf>0</c-><c- p>,</c-><c- mf>50</c-><c- p>,</c-><c- mf>50</c-><c- p>);</c->
canvas<c- p>.</c->setAttribute<c- p>(</c-><c- t>&apos;width&apos;</c-><c- p>,</c-> <c- t>&apos;300&apos;</c-><c- p>);</c-> <c- c1>// clears the canvas</c->
context<c- p>.</c->fillRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-><c- mf>100</c-><c- p>,</c-><c- mf>50</c-><c- p>,</c-><c- mf>50</c-><c- p>);</c->
canvas<c- p>.</c->width <c- o>=</c-> canvas<c- p>.</c->width<c- p>;</c-> <c- c1>// clears the canvas</c->
context<c- p>.</c->fillRect<c- p>(</c-><c- mf>100</c-><c- p>,</c-><c- mf>0</c-><c- p>,</c-><c- mf>50</c-><c- p>,</c-><c- mf>50</c-><c- p>);</c-> <c- c1>// only this square remains</c-></code></pre>
  </div>

  <hr>

  <p>The <dfn data-dfn-for=CanvasRenderingContext2D id=dom-context-2d-canvas data-dfn-type=attribute><code>canvas</code></dfn> attribute must return the value it was
  initialized to when the object was created.</p>

  

  <hr>

  <p>The <code id=2dcontext:predefinedcolorspace-2><a href=#predefinedcolorspace>PredefinedColorSpace</a></code> enumeration is used to specify the <a href=#concept-canvas-color-space id=2dcontext:concept-canvas-color-space-3>color space</a> of the canvas's backing store.</p>

  <p>The "<dfn data-dfn-for=PredefinedColorSpace id=dom-predefinedcolorspace-srgb data-dfn-type=enum-value><code>srgb</code></dfn>" value indicates the <a id="2dcontext:'srgb'" href=https://drafts.csswg.org/css-color/#valdef-color-srgb data-x-internal="'srgb'">'srgb'</a>
  color space.</p>

  <p>The "<dfn data-dfn-for=PredefinedColorSpace id=dom-predefinedcolorspace-display-p3 data-dfn-type=enum-value><code>display-p3</code></dfn>" value indicates the
  <a id="2dcontext:'display-p3'" href=https://drafts.csswg.org/css-color/#valdef-color-display-p3 data-x-internal="'display-p3'">'display-p3'</a> color space.</p>

  <p class=note>The algorithm for converting between color spaces can be found in the
  <a id=2dcontext:converting-colors href=https://drafts.csswg.org/css-color/#color-conversion data-x-internal=converting-colors>Converting Colors</a> section of <cite>CSS Color</cite>. <a href=references.html#refsCSSCOLOR>[CSSCOLOR]</a></p>

  <hr>

  <p>The <code id=2dcontext:canvascolortype-2><a href=#canvascolortype>CanvasColorType</a></code> enumeration is used to specify the <a href=#concept-canvas-color-type id=2dcontext:concept-canvas-color-type-3>color type</a> of the canvas's backing store.</p>

  <p>The "<dfn data-dfn-for=CanvasColorType id=dom-canvascolortype-unorm8 data-dfn-type=enum-value><code>unorm8</code></dfn>" value indicates that the type
  for all color components is 8-bit unsigned normalized.</p>

  <p>The "<dfn data-dfn-for=CanvasColorType id=dom-canvascolortype-float16 data-dfn-type=enum-value><code>float16</code></dfn>" value indicates that the type
  for all color components is 16-bit floating point.</p>

  <hr>

  <p>The <code id=2dcontext:canvasfillrule-7><a href=#canvasfillrule>CanvasFillRule</a></code> enumeration is used to select the <dfn id=fill-rule>fill rule</dfn>
  algorithm by which to determine if a point is inside or outside a path.</p>

  <p>The "<dfn data-dfn-for=CanvasFillRule id=dom-context-2d-fillrule-nonzero data-dfn-type=enum-value><code>nonzero</code></dfn>" value indicates the nonzero winding
  rule, wherein

     a point is considered to be outside a shape if the number of times a half-infinite straight
     line drawn from that point crosses the shape's path going in one direction is equal to the
     number of times it crosses the path going in the other direction.

  </p>


  <p>The "<dfn data-dfn-for=CanvasFillRule id=dom-context-2d-fillrule-evenodd data-dfn-type=enum-value><code>evenodd</code></dfn>" value indicates the even-odd rule,
  wherein

     a point is considered to be outside a shape if the number of times a half-infinite straight
     line drawn from that point crosses the shape's path is even.

  </p>

  <p>If a point is not outside a shape, it is inside the shape.</p>


  <hr>

  <p>The <code id=2dcontext:imagesmoothingquality-2><a href=#imagesmoothingquality>ImageSmoothingQuality</a></code> enumeration is used to express a preference for the
  interpolation quality to use when smoothing images.</p>

  <p>The "<dfn data-dfn-for=ImageSmoothingQuality id=dom-context-2d-imagesmoothingquality-low data-dfn-type=enum-value><code>low</code></dfn>" value indicates a preference
  for a low level of image interpolation quality. Low-quality image interpolation may be more
  computationally efficient than higher settings.</p>

  <p>The "<dfn data-dfn-for=ImageSmoothingQuality id=dom-context-2d-imagesmoothingquality-medium data-dfn-type=enum-value><code>medium</code></dfn>" value indicates a
  preference for a medium level of image interpolation quality.</p>

  <p>The "<dfn data-dfn-for=ImageSmoothingQuality id=dom-context-2d-imagesmoothingquality-high data-dfn-type=enum-value><code>high</code></dfn>" value indicates a preference
  for a high level of image interpolation quality. High-quality image interpolation may be more
  computationally expensive than lower settings.</p>

  <p class=note>Bilinear scaling is an example of a relatively fast, lower-quality image-smoothing
  algorithm. Bicubic or Lanczos scaling are examples of image-smoothing algorithms that produce
  higher-quality output. This specification does not mandate that specific interpolation algorithms
  be used.</p>


  <h6 id=implementation-notes><span class=secno>4.12.5.1.1</span> Implementation notes<a href=#implementation-notes class=self-link></a></h6>

  <p><i>This section is non-normative.</i></p>

  <p>The <a href=#output-bitmap id=implementation-notes:output-bitmap>output bitmap</a>, when it is not directly displayed by the user agent,
  implementations can, instead of updating this bitmap, merely remember the sequence of drawing
  operations that have been applied to it until such time as the bitmap's actual data is needed
  (for example because of a call to <code id=implementation-notes:dom-context-2d-drawimage><a href=#dom-context-2d-drawimage>drawImage()</a></code>, or
  the <code id=implementation-notes:dom-createimagebitmap><a href=imagebitmap-and-animations.html#dom-createimagebitmap>createImageBitmap()</a></code> factory method). In many
  cases, this will be more memory efficient.</p>

  <p>The bitmap of a <code id=implementation-notes:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element is the one bitmap that's pretty much always going
  to be needed in practice. The <a href=#output-bitmap id=implementation-notes:output-bitmap-2>output bitmap</a> of a rendering context, when it has one,
  is always just an alias to a <code id=implementation-notes:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> element's bitmap.</p>

  <p>Additional bitmaps are sometimes needed, e.g. to enable fast drawing when the canvas is being
  painted at a different size than its <a href=https://drafts.csswg.org/css-images/#natural-dimensions id=implementation-notes:natural-dimensions data-x-internal=natural-dimensions>natural size</a>,
  or to enable double buffering so that graphics updates, like page scrolling for example, can be
  processed concurrently while canvas draw commands are being executed.</p>

  <h6 id=the-canvas-settings><span class=secno>4.12.5.1.2</span> The canvas settings<a href=#the-canvas-settings class=self-link></a></h6>

  <p>A <code id=the-canvas-settings:canvassettings><a href=#canvassettings>CanvasSettings</a></code> object has an <dfn id=output-bitmap>output bitmap</dfn> that is initialized when
  the object is created.</p>

  <p>The <a href=#output-bitmap id=the-canvas-settings:output-bitmap>output bitmap</a> has an <a href=#concept-canvas-origin-clean id=the-canvas-settings:concept-canvas-origin-clean>origin-clean</a> flag, which can be set to true or false.
  Initially, when one of these bitmaps is created, its <a href=#concept-canvas-origin-clean id=the-canvas-settings:concept-canvas-origin-clean-2>origin-clean</a> flag must be set to true.</p>

  <p>The <code id=the-canvas-settings:canvassettings-2><a href=#canvassettings>CanvasSettings</a></code> object also has an <dfn id=concept-canvas-alpha>alpha</dfn> boolean. When a <code id=the-canvas-settings:canvassettings-3><a href=#canvassettings>CanvasSettings</a></code> object's
  <a href=#concept-canvas-alpha id=the-canvas-settings:concept-canvas-alpha>alpha</a> is false, then its alpha component must be fixed
  to 1.0 (fully opaque) for all pixels, and attempts to change the alpha component of any pixel must
  be silently ignored.</p>

  <p class=note>Thus, the bitmap of such a context starts off as <a id=the-canvas-settings:opaque-black href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque black</a> instead
  of <a id=the-canvas-settings:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>; <code id=the-canvas-settings:dom-context-2d-clearrect><a href=#dom-context-2d-clearrect>clearRect()</a></code>
  always results in <a id=the-canvas-settings:opaque-black-2 href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque black</a> pixels, every fourth byte from <code id=the-canvas-settings:dom-context-2d-getimagedata><a href=#dom-context-2d-getimagedata>getImageData()</a></code> is always 255, the <code id=the-canvas-settings:dom-context-2d-putimagedata><a href=#dom-context-2d-putimagedata>putImageData()</a></code> method effectively ignores every fourth
  byte in its input, and so on. However, the alpha component of styles and images drawn onto the
  canvas are still honoured up to the point where they would impact the <a href=#output-bitmap id=the-canvas-settings:output-bitmap-2>output bitmap</a>'s
  alpha component; for instance, drawing a 50% transparent white square on a freshly created
  <a href=#output-bitmap id=the-canvas-settings:output-bitmap-3>output bitmap</a> with its <a href=#concept-canvas-alpha id=the-canvas-settings:concept-canvas-alpha-2>alpha</a> set to false
  will result in a fully-opaque gray square.</p>

  <p>The <code id=the-canvas-settings:canvassettings-4><a href=#canvassettings>CanvasSettings</a></code> object also has a <dfn id=concept-canvas-desynchronized>desynchronized</dfn> boolean. When a
  <code id=the-canvas-settings:canvassettings-5><a href=#canvassettings>CanvasSettings</a></code> object's <a href=#concept-canvas-desynchronized id=the-canvas-settings:concept-canvas-desynchronized>desynchronized</a> is true, then the user agent may
  optimize the rendering of the canvas to reduce the latency, as measured from input events to
  rasterization, by desynchronizing the canvas paint cycle from the event loop, bypassing the
  ordinary user agent rendering algorithm, or both. Insofar as this mode involves bypassing the
  usual paint mechanisms, rasterization, or both, it might introduce visible tearing artifacts.</p>

  <p class=note>The user agent usually renders on a buffer which is not being displayed, quickly
  swapping it and the one being scanned out for presentation; the former buffer is called back
  buffer and the latter <i>front buffer</i>. A popular technique for reducing latency is called
  front buffer rendering, also known as <i>single buffer</i> rendering, where rendering happens in
  parallel and racily with the scanning out process. This technique reduces the latency at the price
  of potentially introducing tearing artifacts and can be used to implement in total or part of the
  <a href=#concept-canvas-desynchronized id=the-canvas-settings:concept-canvas-desynchronized-2>desynchronized</a> boolean.
  <a href=references.html#refsMULTIPLEBUFFERING>[MULTIPLEBUFFERING]</a></p>

  <p class=note>The <a href=#concept-canvas-desynchronized id=the-canvas-settings:concept-canvas-desynchronized-3>desynchronized</a> boolean can
  be useful when implementing certain kinds of applications, such as drawing applications, where the
  latency between input and rasterization is critical.</p>

  <p>The <code id=the-canvas-settings:canvassettings-6><a href=#canvassettings>CanvasSettings</a></code> object also has a <dfn id=concept-canvas-will-read-frequently>will read frequently</dfn> boolean. When a
  <code id=the-canvas-settings:canvassettings-7><a href=#canvassettings>CanvasSettings</a></code> object's <a href=#concept-canvas-will-read-frequently id=the-canvas-settings:concept-canvas-will-read-frequently>will read
  frequently</a> is true, the user agent may optimize the canvas for readback operations.</p>

  <p class=note>On most devices the user agent needs to decide whether to store the canvas's
  <a href=#output-bitmap id=the-canvas-settings:output-bitmap-4>output bitmap</a> on the GPU (this is also called "hardware accelerated"), or on the CPU
  (also called "software"). Most rendering operations are more performant for accelerated canvases,
  with the major exception being readback with <code id=the-canvas-settings:dom-context-2d-getimagedata-2><a href=#dom-context-2d-getimagedata>getImageData()</a></code>, <code id=the-canvas-settings:dom-canvas-todataurl><a href=#dom-canvas-todataurl>toDataURL()</a></code>, or <code id=the-canvas-settings:dom-canvas-toblob><a href=#dom-canvas-toblob>toBlob()</a></code>. <code id=the-canvas-settings:canvassettings-8><a href=#canvassettings>CanvasSettings</a></code> objects with <a href=#concept-canvas-will-read-frequently id=the-canvas-settings:concept-canvas-will-read-frequently-2>will read frequently</a> equal to true tell the
  user agent that the webpage is likely to perform many readback operations and that it is
  advantageous to use a software canvas.</p>

  <p>The <code id=the-canvas-settings:canvassettings-9><a href=#canvassettings>CanvasSettings</a></code> object also has a <dfn id=concept-canvas-color-space>color space</dfn> setting of type
  <code id=the-canvas-settings:predefinedcolorspace><a href=#predefinedcolorspace>PredefinedColorSpace</a></code>. The <code id=the-canvas-settings:canvassettings-10><a href=#canvassettings>CanvasSettings</a></code> object's <a href=#concept-canvas-color-space id=the-canvas-settings:concept-canvas-color-space>color space</a> indicates the color space for the
  <a href=#output-bitmap id=the-canvas-settings:output-bitmap-5>output bitmap</a>.</p>

  <p>The <code id=the-canvas-settings:canvassettings-11><a href=#canvassettings>CanvasSettings</a></code> object also has a <dfn id=concept-canvas-color-type>color type</dfn> setting of type
  <code id=the-canvas-settings:canvascolortype><a href=#canvascolortype>CanvasColorType</a></code>. The <code id=the-canvas-settings:canvassettings-12><a href=#canvassettings>CanvasSettings</a></code> object's <a href=#concept-canvas-color-type id=the-canvas-settings:concept-canvas-color-type>color type</a> indicates the data type of the
  color and alpha components of the pixels of the <a href=#output-bitmap id=the-canvas-settings:output-bitmap-6>output bitmap</a>.</p>

  <p>To <dfn id=canvas-setting-init-bitmap>initialize a <code>CanvasSettings</code> output
  bitmap</dfn>, given a <code id=the-canvas-settings:canvassettings-13><a href=#canvassettings>CanvasSettings</a></code> <var>context</var> and a
  <code id=the-canvas-settings:canvasrenderingcontext2dsettings><a href=#canvasrenderingcontext2dsettings>CanvasRenderingContext2DSettings</a></code> <var>settings</var>:</p>

  <ol><li><p>Set <var>context</var>'s <a href=#concept-canvas-alpha id=the-canvas-settings:concept-canvas-alpha-3>alpha</a> to
   <var>settings</var>["<dfn data-dfn-for=CanvasRenderingContext2DSettings id=dom-canvasrenderingcontext2dsettings-alpha data-dfn-type=dict-member><code>alpha</code></dfn>"].<li><p>Set <var>context</var>'s <a href=#concept-canvas-desynchronized id=the-canvas-settings:concept-canvas-desynchronized-4>desynchronized</a> to <var>settings</var>["<dfn data-dfn-for=CanvasRenderingContext2DSettings id=dom-canvasrenderingcontext2dsettings-desynchronized data-dfn-type=dict-member><code>desynchronized</code></dfn>"].<li><p>Set <var>context</var>'s <a href=#concept-canvas-color-space id=the-canvas-settings:concept-canvas-color-space-2>color space</a> to
   <var>settings</var>["<dfn data-dfn-for=CanvasRenderingContext2DSettings id=dom-canvasrenderingcontext2dsettings-colorspace data-dfn-type=dict-member><code>colorSpace</code></dfn>"].<li><p>Set <var>context</var>'s <a href=#concept-canvas-color-type id=the-canvas-settings:concept-canvas-color-type-2>color type</a> to
   <var>settings</var>["<dfn data-dfn-for=CanvasRenderingContext2DSettings id=dom-canvasrenderingcontext2dsettings-colortype data-dfn-type=dict-member><code>colorType</code></dfn>"].<li><p>Set <var>context</var>'s <a href=#concept-canvas-will-read-frequently id=the-canvas-settings:concept-canvas-will-read-frequently-3>will read
   frequently</a> to <var>settings</var>["<dfn data-dfn-for=CanvasRenderingContext2DSettings id=dom-canvasrenderingcontext2dsettings-willreadfrequently data-dfn-type=dict-member><code>willReadFrequently</code></dfn>"].</ol>

  <p>The <dfn data-dfn-for=CanvasSettings id=dom-context-2d-canvas-getcontextattributes data-dfn-type=method><code>getContextAttributes()</code></dfn> method
  steps are to return «[ "<code id=the-canvas-settings:dom-canvasrenderingcontext2dsettings-alpha><a href=#dom-canvasrenderingcontext2dsettings-alpha>alpha</a></code>" →
  <a id=the-canvas-settings:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-alpha id=the-canvas-settings:concept-canvas-alpha-4>alpha</a>, "<code id=the-canvas-settings:dom-canvasrenderingcontext2dsettings-desynchronized><a href=#dom-canvasrenderingcontext2dsettings-desynchronized>desynchronized</a></code>" →
  <a id=the-canvas-settings:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-desynchronized id=the-canvas-settings:concept-canvas-desynchronized-5>desynchronized</a>, "<code id=the-canvas-settings:dom-canvasrenderingcontext2dsettings-colorspace><a href=#dom-canvasrenderingcontext2dsettings-colorspace>colorSpace</a></code>" → <a id=the-canvas-settings:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
  <a href=#concept-canvas-color-space id=the-canvas-settings:concept-canvas-color-space-3>color space</a>, "<code id=the-canvas-settings:dom-canvasrenderingcontext2dsettings-colortype><a href=#dom-canvasrenderingcontext2dsettings-colortype>colorType</a></code>" → <a id=the-canvas-settings:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
  <a href=#concept-canvas-color-type id=the-canvas-settings:concept-canvas-color-type-3>color type</a>, "<code id=the-canvas-settings:dom-canvasrenderingcontext2dsettings-willreadfrequently><a href=#dom-canvasrenderingcontext2dsettings-willreadfrequently>willReadFrequently</a></code>" →
  <a id=the-canvas-settings:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-will-read-frequently id=the-canvas-settings:concept-canvas-will-read-frequently-4>will read frequently</a>
  ]».</p>

  <h6 id=the-canvas-state><span class=secno>4.12.5.1.3</span> The canvas state<a href=#the-canvas-state class=self-link></a></h6>

  <p>Objects that implement the <code id=the-canvas-state:canvasstate><a href=#canvasstate>CanvasState</a></code> interface maintain a stack of drawing
  states. <dfn id=drawing-state>Drawing states</dfn> consist of:</p>

  <ul><li><p>The current <a href=#transformations id=the-canvas-state:transformations>transformation
   matrix</a>.<li><p>The current <a href=#clipping-region id=the-canvas-state:clipping-region>clipping region</a>.<li><p>The current <a href=#concept-canvastextdrawingstyles-letter-spacing id=the-canvas-state:concept-canvastextdrawingstyles-letter-spacing>letter
   spacing</a>, <a href=#concept-canvastextdrawingstyles-word-spacing id=the-canvas-state:concept-canvastextdrawingstyles-word-spacing>word spacing</a>,
   <a href=#concept-canvasfillstrokestyles-fill-style id=the-canvas-state:concept-canvasfillstrokestyles-fill-style>fill style</a>, <a href=#concept-canvasfillstrokestyles-stroke-style id=the-canvas-state:concept-canvasfillstrokestyles-stroke-style>stroke style</a>, <a href=#concept-canvas-current-filter id=the-canvas-state:concept-canvas-current-filter>filter</a>, <a href=#concept-canvas-global-alpha id=the-canvas-state:concept-canvas-global-alpha>global alpha</a>, <a href=#current-compositing-and-blending-operator id=the-canvas-state:current-compositing-and-blending-operator>compositing and blending operator</a>, and <a href=#concept-canvasshadowstyles-shadow-color id=the-canvas-state:concept-canvasshadowstyles-shadow-color>shadow color</a>.<li><p>The current values of the following attributes: <code id=the-canvas-state:dom-context-2d-linewidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code id=the-canvas-state:dom-context-2d-linecap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code id=the-canvas-state:dom-context-2d-linejoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code id=the-canvas-state:dom-context-2d-miterlimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code id=the-canvas-state:dom-context-2d-linedashoffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code id=the-canvas-state:dom-context-2d-shadowoffsetx><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code id=the-canvas-state:dom-context-2d-shadowoffsety><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code>, <code id=the-canvas-state:dom-context-2d-shadowblur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code id=the-canvas-state:dom-context-2d-lang><a href=#dom-context-2d-lang>lang</a></code>, <code id=the-canvas-state:dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code id=the-canvas-state:dom-context-2d-textalign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code id=the-canvas-state:dom-context-2d-textbaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code id=the-canvas-state:dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code>, <code id=the-canvas-state:dom-context-2d-fontkerning><a href=#dom-context-2d-fontkerning>fontKerning</a></code>, <code id=the-canvas-state:dom-context-2d-fontstretch><a href=#dom-context-2d-fontstretch>fontStretch</a></code>, <code id=the-canvas-state:dom-context-2d-fontvariantcaps><a href=#dom-context-2d-fontvariantcaps>fontVariantCaps</a></code>, <code id=the-canvas-state:dom-context-2d-textrendering><a href=#dom-context-2d-textrendering>textRendering</a></code>, <code id=the-canvas-state:dom-context-2d-imagesmoothingenabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>, <code id=the-canvas-state:dom-context-2d-imagesmoothingquality><a href=#dom-context-2d-imagesmoothingquality>imageSmoothingQuality</a></code>.<li><p>The current <a href=#dash-list id=the-canvas-state:dash-list>dash list</a>.</ul>

  <p class=note>The rendering context's bitmaps are not part of the drawing state, as they
  depend on whether and how the rendering context is bound to a <code id=the-canvas-state:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element.</p>

  <p>Objects that implement the <code id=the-canvas-state:canvasstate-2><a href=#canvasstate>CanvasState</a></code> mixin have a <dfn id=concept-canvas-context-lost>context lost</dfn> boolean, that is initialized to false
  when the object is created. The <a href=#concept-canvas-context-lost id=the-canvas-state:concept-canvas-context-lost>context lost</a>
  value is updated in the <a id=the-canvas-state:context-lost-steps href=webappapis.html#context-lost-steps>context lost steps</a>.</p>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-save id=dom-context-2d-save-dev>save</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save title="The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing the current state onto a stack.">CanvasRenderingContext2D/save</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Pushes the current state onto the stack.<dt><code><var>context</var>.<a href=#dom-context-2d-restore id=dom-context-2d-restore-dev>restore</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore title="The CanvasRenderingContext2D.restore() method of the Canvas 2D API restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.">CanvasRenderingContext2D/restore</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Pops the top state on the stack, restoring the context to that state.<dt><code><var>context</var>.<a href=#dom-context-2d-reset id=dom-context-2d-reset-dev>reset</a>()</code><dd><p>Resets the rendering context, which includes the backing buffer, the drawing state stack,
   path, and styles.<dt><code><var>context</var>.<a href=#dom-context-2d-iscontextlost id=dom-context-2d-iscontextlost-dev>isContextLost</a>()</code><dd><p>Returns true if the rendering context was lost. Context loss can occur due to driver
   crashes, running out of memory, etc. In these cases, the canvas loses its backing storage and
   takes steps to <a href=#reset-the-rendering-context-to-its-default-state id=the-canvas-state:reset-the-rendering-context-to-its-default-state>reset the rendering context to its default state</a>.</dl>

  

  <p>The <dfn data-dfn-for=CanvasState id=dom-context-2d-save data-dfn-type=method><code>save()</code></dfn> method
  steps are to push a copy of the current drawing state onto the drawing state stack.</p>

  <p>The <dfn data-dfn-for=CanvasState id=dom-context-2d-restore data-dfn-type=method><code>restore()</code></dfn>
  method steps are to pop the top entry in the drawing state stack, and reset the drawing state it
  describes. If there is no saved state, then the method must do nothing.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/reset title="The CanvasRenderingContext2D.reset() method of the Canvas 2D API resets the rendering context to its default state, allowing it to be reused for drawing something else without having to explicitly reset all the properties.">CanvasRenderingContext2D/reset</a><div class=support><span class="firefox yes"><span>Firefox</span><span>113+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D#canvasrenderingcontext2d.reset title="The OffscreenCanvasRenderingContext2D interface is a CanvasRenderingContext2D rendering context for drawing to the bitmap of an OffscreenCanvas object. It is similar to the CanvasRenderingContext2D object, with the following differences:">OffscreenCanvasRenderingContext2D#canvasrenderingcontext2d.reset</a><div class=support><span class="firefox yes"><span>Firefox</span><span>113+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasState id=dom-context-2d-reset data-dfn-type=method><code>reset()</code></dfn>
  method steps are to <a href=#reset-the-rendering-context-to-its-default-state id=the-canvas-state:reset-the-rendering-context-to-its-default-state-2>reset the rendering context to its default state</a>.</p>

  <p>To <dfn id=reset-the-rendering-context-to-its-default-state>reset the rendering context to its default state</dfn>:</p>

  <ol><li><p>Clear canvas's bitmap to <a id=the-canvas-state:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.<li><p>Empty the list of subpaths in context's <a href=#current-default-path id=the-canvas-state:current-default-path>current default path</a>.<li><p>Clear the context's drawing state stack.<li><p>Reset everything that <a href=#drawing-state id=the-canvas-state:drawing-state>drawing state</a> consists of to their initial
   values.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isContextLost title="The CanvasRenderingContext2D.isContextLost() method of the Canvas 2D API returns true if the rendering context is lost (and has not yet been reset). This might occur due to driver crashes, running out of memory, and so on.">CanvasRenderingContext2D/isContextLost</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasState id=dom-context-2d-iscontextlost data-dfn-type=method><code>isContextLost()</code></dfn> method steps are to return
  <a id=the-canvas-state:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-context-lost id=the-canvas-state:concept-canvas-context-lost-2>context lost</a>.</p>

  

  <h6 id=line-styles><span class=secno>4.12.5.1.4</span> Line styles<a href=#line-styles class=self-link></a></h6>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-linewidth id=dom-context-2d-linewidth-dev>lineWidth</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth title="The CanvasRenderingContext2D.lineWidth property of the Canvas 2D API sets the thickness of lines.">CanvasRenderingContext2D/lineWidth</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-linewidth id=line-styles:dom-context-2d-linewidth>lineWidth</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current line width.</p>

    <p>Can be set, to change the line width. Values that are not finite values greater than zero are
    ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-linecap id=dom-context-2d-linecap-dev>lineCap</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap title="The CanvasRenderingContext2D.lineCap property of the Canvas 2D API determines the shape used to draw the end points of lines.">CanvasRenderingContext2D/lineCap</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-linecap id=line-styles:dom-context-2d-linecap>lineCap</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current line cap style.</p>

    <p>Can be set, to change the line cap style.</p>

    <p>The possible line cap styles are "<code>butt</code>", "<code>round</code>", and "<code>square</code>". Other values are ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-linejoin id=dom-context-2d-linejoin-dev>lineJoin</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin title="The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines the shape used to join two line segments where they meet.">CanvasRenderingContext2D/lineJoin</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-linejoin id=line-styles:dom-context-2d-linejoin>lineJoin</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current line join style.</p>

    <p>Can be set, to change the line join style.</p>

    <p>The possible line join styles are "<code>bevel</code>", "<code>round</code>", and "<code>miter</code>". Other values are ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-miterlimit id=dom-context-2d-miterlimit-dev>miterLimit</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit title="The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio.">CanvasRenderingContext2D/miterLimit</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-miterlimit id=line-styles:dom-context-2d-miterlimit>miterLimit</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current miter limit ratio.</p>

    <p>Can be set, to change the miter limit ratio. Values that are not finite values greater than
    zero are ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-setlinedash id=dom-context-2d-setlinedash-dev>setLineDash</a>(<var>segments</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash title="The setLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface sets the line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.">CanvasRenderingContext2D/setLineDash</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-setlinedash id=line-styles:dom-context-2d-setlinedash>setLineDash</a>(<var>segments</var>)</code><dd>
    <p>Sets the current line dash pattern (as used when stroking). The argument is a list of
    distances for which to alternately have the line on and the line off.</p>
   <dt><code><var>segments</var> = <var>context</var>.<a href=#dom-context-2d-getlinedash id=dom-context-2d-getlinedash-dev>getLineDash</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getLineDash title="The getLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface gets the current line dash pattern.">CanvasRenderingContext2D/getLineDash</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>segments</var> = <var>styles</var>.<a href=#dom-context-2d-getlinedash id=line-styles:dom-context-2d-getlinedash>getLineDash</a>()</code><dd>
    <p>Returns a copy of the current line dash pattern. The array returned will always have an even
    number of entries (i.e. the pattern is normalized).</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-linedashoffset id=dom-context-2d-linedashoffset-dev>lineDashOffset</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset title="The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash offset, or &quot;phase.&quot;">CanvasRenderingContext2D/lineDashOffset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-linedashoffset id=line-styles:dom-context-2d-linedashoffset>lineDashOffset</a></code><dd>
    <p>Returns the phase offset (in the same units as the line dash pattern).</p>

    <p>Can be set, to change the phase offset. Values that are not finite values are ignored.</p>
   </dl>

  

  <p>Objects that implement the <code id=line-styles:canvaspathdrawingstyles><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface have attributes and
  methods (defined in this section) that control how lines are treated by the object.</p>

  <p>The <dfn data-dfn-for=CanvasPathDrawingStyles id=dom-context-2d-linewidth data-dfn-type=attribute><code>lineWidth</code></dfn> attribute gives the width of lines, in
  coordinate space units. On getting, it must return the current value. On setting, zero, negative,
  infinite, and NaN values must be ignored, leaving the value unchanged; other values must change
  the current value to the new value.</p>

  <p>When the object implementing the <code id=line-styles:canvaspathdrawingstyles-2><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface is created, the
  <code id=line-styles:dom-context-2d-linewidth-2><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must initially have the value
  1.0.</p>

  <hr>

  <p>The <dfn data-dfn-for=CanvasPathDrawingStyles id=dom-context-2d-linecap data-dfn-type=attribute><code>lineCap</code></dfn> attribute defines the type of endings that
  UAs will place on the end of lines. The three valid values are "<code>butt</code>",
  "<code>round</code>", and "<code>square</code>".</p>

  <p>On getting, it must return the current value. On setting, the current value must be changed
  to the new value.</p>

  <p>When the object implementing the <code id=line-styles:canvaspathdrawingstyles-3><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface is created, the
  <code id=line-styles:dom-context-2d-linecap-2><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must initially have the value
  "<code>butt</code>".</p>

  <hr>

  <p>The <dfn data-dfn-for=CanvasPathDrawingStyles id=dom-context-2d-linejoin data-dfn-type=attribute><code>lineJoin</code></dfn> attribute defines the type of corners that
  UAs will place where two lines meet. The three valid values are "<code>bevel</code>",
  "<code>round</code>", and "<code>miter</code>".</p>

  <p>On getting, it must return the current value. On setting, the current value must be changed
  to the new value.</p>

  <p>When the object implementing the <code id=line-styles:canvaspathdrawingstyles-4><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface is created, the
  <code id=line-styles:dom-context-2d-linejoin-2><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute must initially have the value
  "<code>miter</code>".</p>

  <hr>

  <p>When the <code id=line-styles:dom-context-2d-linejoin-3><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute has the value "<code>miter</code>", strokes use the miter limit ratio to decide how to render joins. The
  miter limit ratio can be explicitly set using the <dfn data-dfn-for=CanvasPathDrawingStyles id=dom-context-2d-miterlimit data-dfn-type=attribute><code>miterLimit</code></dfn>
  attribute. On getting, it must return the current value. On setting, zero, negative, infinite, and
  NaN values must be ignored, leaving the value unchanged; other values must change the current
  value to the new value.</p>
  

  <p>When the object implementing the <code id=line-styles:canvaspathdrawingstyles-5><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface is created, the
  <code id=line-styles:dom-context-2d-miterlimit-2><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must initially have the value
  10.0.</p>

  <hr>

  <p>Each <code id=line-styles:canvaspathdrawingstyles-6><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> object has a <dfn id=dash-list>dash list</dfn>, which is either
  empty or consists of an even number of non-negative numbers. Initially, the <a href=#dash-list id=line-styles:dash-list>dash list</a>
  must be empty.</p>

  <p>The <dfn data-dfn-for=CanvasPathDrawingStyles id=dom-context-2d-setlinedash data-dfn-type=method><code>setLineDash(<var>segments</var>)</code></dfn> method, when invoked, must run
  these steps:</p>

  <ol><li><p>If any value in <var>segments</var> is not finite (e.g. an Infinity or a NaN value), or
   if any value is negative (less than zero), then return (without throwing an exception;
   user agents could show a message on a developer console, though, as that would be helpful for
   debugging).<li><p>If the number of elements in <var>segments</var> is odd, then let <var>segments</var>
   be the concatenation of two copies of <var>segments</var>.<li><p>Set the object's <a href=#dash-list id=line-styles:dash-list-2>dash list</a> to <var>segments</var>.</ol>

  <p>When the <dfn data-dfn-for=CanvasPathDrawingStyles id=dom-context-2d-getlinedash data-dfn-type=method><code>getLineDash()</code></dfn> method is invoked, it must return a
  sequence whose values are the values of the object's <a href=#dash-list id=line-styles:dash-list-3>dash list</a>, in the same
  order.</p>

  <p>It is sometimes useful to change the "phase" of the dash pattern, e.g. to achieve a "marching
  ants" effect. The phase can be set using the <dfn data-dfn-for=CanvasPathDrawingStyles id=dom-context-2d-linedashoffset data-dfn-type=attribute><code>lineDashOffset</code></dfn> attribute. On getting, it must
  return the current value. On setting, infinite and NaN values must be ignored, leaving the value
  unchanged; other values must change the current value to the new value.</p>

  <p>When the object implementing the <code id=line-styles:canvaspathdrawingstyles-7><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface is created, the
  <code id=line-styles:dom-context-2d-linedashoffset-2><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code> attribute must initially have
  the value 0.0.</p>

  <hr>

  <p>When a user agent is to <dfn id=trace-a-path>trace a path</dfn>, given an object <var>style</var>
  that implements the <code id=line-styles:canvaspathdrawingstyles-8><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface, it must run the following
  algorithm. This algorithm returns a new <a href=#concept-path id=line-styles:concept-path>path</a>.</p>

  <ol><li><p>Let <var>path</var> be a copy of the path being traced.<li><p>Prune all zero-length <a href=#line-segments id=line-styles:line-segments>line segments</a> from <var>path</var>.<li><p>Remove from <var>path</var> any subpaths containing no lines (i.e. subpaths with
   just one point).<li><p>Replace each point in each subpath of <var>path</var> other than the first point
   and the last point of each subpath by a <i>join</i> that joins the line leading to that point to
   the line leading out of that point, such that the subpaths all consist of two points (a starting
   point with a line leading out of it, and an ending point with a line leading into it), one or
   more lines (connecting the points and the joins), and zero or more joins (each connecting one
   line to another), connected together such that each subpath is a series of one or more lines with
   a join between each one and a point on each end.<li><p>Add a straight closing line to each closed subpath in <var>path</var> connecting
   the last point and the first point of that subpath; change the last point to a join (from the
   previously last line to the newly added closing line), and change the first point to a join (from
   the newly added closing line to the first line).</p>

   <li><p>If <var>style</var>'s <a href=#dash-list id=line-styles:dash-list-4>dash list</a> is empty, then jump to the step
   labeled <i>convert</i>.<li><p>Let <var>pattern width</var> be the concatenation of all the entries of
   <var>style</var>'s <a href=#dash-list id=line-styles:dash-list-5>dash list</a>, in coordinate space units.</p>

   <li><p>For each subpath <var>subpath</var> in <var>path</var>, run the
   following substeps. These substeps mutate the subpaths in <var>path</var> <i>in
   vivo</i>.</p>

    <ol><li><p>Let <var>subpath width</var> be the length of all the lines of <var>subpath</var>, in coordinate space units.</p>

     <li><p>Let <var>offset</var> be the value of <var>style</var>'s <code id=line-styles:dom-context-2d-linedashoffset-3><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in coordinate space
     units.<li>
      <p>While <var>offset</var> is greater than <var>pattern width</var>,
      decrement it by <var>pattern width</var>.</p>

      <p>While <var>offset</var> is less than zero, increment it by <var>pattern
      width</var>.</p>
     <li><p>Define <var>L</var> to be a linear coordinate line defined along all lines in
     <var>subpath</var>, such that the start of the first line in the subpath is defined
     as coordinate 0, and the end of the last line in the subpath is defined as coordinate <var>subpath width</var>.<li><p>Let <var>position</var> be 0 minus <var>offset</var>.<li><p>Let <var>index</var> be 0.<li><p>Let <var>current state</var> be <i>off</i> (the other states being <i>on</i>
     and <i>zero-on</i>).<li><p><i>Dash on</i>: Let <var>segment length</var> be
     the value of <var>style</var>'s <a href=#dash-list id=line-styles:dash-list-6>dash
     list</a>'s <var>index</var>th entry.<li><p>Increment <var>position</var> by <var>segment length</var>.<li><p>If <var>position</var> is greater than <var>subpath width</var>,
     then end these substeps for this subpath and start them again for the next subpath; if there
     are no more subpaths, then jump to the step labeled <i>convert</i> instead.<li><p>If <var>segment length</var> is nonzero, then let <var>current state</var> be
     <i>on</i>.<li><p>Increment <var>index</var> by one.<li><p><i>Dash off</i>: Let <var>segment
     length</var> be the value of <var>style</var>'s <a href=#dash-list id=line-styles:dash-list-7>dash list</a>'s <var>index</var>th entry.<li><p>Let <var>start</var> be the offset <var>position</var> on <var>L</var>.<li><p>Increment <var>position</var> by <var>segment length</var>.<li><p>If <var>position</var> is less than zero, then jump to the step labeled
     <i>post-cut</i>.<li><p>If <var>start</var> is less than zero, then let <var>start</var> be
     zero.<li><p>If <var>position</var> is greater than <var>subpath width</var>,
     then let <var>end</var> be the offset <var>subpath width</var> on <var>L</var>. Otherwise, let <var>end</var> be the offset <var>position</var> on <var>L</var>.<li>
      <p>Jump to the first appropriate step:</p>

      <dl class=switch><dt>If <var>segment length</var> is zero and <var>current state</var> is
       <i>off</i><dd>
        <p>Do nothing, just continue to the next step.</p>
       <dt>If <var>current state</var> is <i>off</i><dd>
        <p>Cut the line on which <var>end</var> finds itself short at <var>end</var> and place a point there, cutting in two the subpath that it was in;
        remove all line segments, joins, points, and subpaths that are between <var>start</var> and <var>end</var>; and finally place a single point at <var>start</var> with no lines connecting to it.</p>

        <p>The point has a <i>directionality</i> for the purposes of drawing line caps (see below).
        The directionality is the direction that the original line had at that point (i.e. when <var>L</var> was defined above).</p>
       <dt>Otherwise<dd>
        <p>Cut the line on which <var>start</var> finds itself into two at <var>start</var> and place a point there, cutting in two the subpath that it was in, and
        similarly cut the line on which <var>end</var> finds itself short at <var>end</var> and place a point there, cutting in two the subpath that <em>it</em> was in,
        and then remove all line segments, joins, points, and subpaths that are between <var>start</var> and <var>end</var>.</p>

        <p>If <var>start</var> and <var>end</var> are the same point, then this
        results in just the line being cut in two and two points being inserted there, with nothing
        being removed, unless a join also happens to be at that point, in which case the join must
        be removed.</p>
       </dl>
     <li><p><i>Post-cut</i>: If <var>position</var> is greater than <var>subpath width</var>, then jump to the step labeled <i>convert</i>.<li><p>Increment <var>index</var> by one. If it is equal to the number of entries in
     <var>style</var>'s <a href=#dash-list id=line-styles:dash-list-8>dash list</a>, then let <var>index</var> be
     0.<li><p>Return to the step labeled <i>dash on</i>.</ol>
   <li>
    <p><i>Convert</i>: This is the step that converts the path to a new path that represents its
    stroke.</p>

    <p>Create a new <a href=#concept-path id=line-styles:concept-path-2>path</a> that describes the edge of the areas
    that would be covered if a straight line of length equal to <var>style</var>'s
    <code id=line-styles:dom-context-2d-linewidth-3><a href=#dom-context-2d-linewidth>lineWidth</a></code> was swept along each subpath in <var>path</var> while being kept at an angle such that the line is orthogonal to the path
    being swept, replacing each point with the end cap necessary to satisfy <var>style</var>'s <code id=line-styles:dom-context-2d-linecap-3><a href=#dom-context-2d-linecap>lineCap</a></code> attribute as
    described previously and elaborated below, and replacing each join with the join necessary to
    satisfy <var>style</var>'s <code id=line-styles:dom-context-2d-linejoin-4><a href=#dom-context-2d-linejoin>lineJoin</a></code>
    type, as defined below.</p>

    <p><strong>Caps</strong>: Each point has a flat edge perpendicular to the direction of the line
    coming out of it. This is then augmented according to the value of <var>style</var>'s <code id=line-styles:dom-context-2d-linecap-4><a href=#dom-context-2d-linecap>lineCap</a></code>. The "<code>butt</code>" value means that no additional line cap is added. The "<code>round</code>" value means that a semi-circle with the diameter equal to
    <var>style</var>'s <code id=line-styles:dom-context-2d-linewidth-4><a href=#dom-context-2d-linewidth>lineWidth</a></code> width must
    additionally be placed on to the line coming out of each point. The "<code>square</code>" value means that a rectangle with the length of <var>style</var>'s <code id=line-styles:dom-context-2d-linewidth-5><a href=#dom-context-2d-linewidth>lineWidth</a></code> width and the
    width of half <var>style</var>'s <code id=line-styles:dom-context-2d-linewidth-6><a href=#dom-context-2d-linewidth>lineWidth</a></code> width, placed flat against the edge
    perpendicular to the direction of the line coming out of the point, must be added at each
    point.</p>

    <p>Points with no lines coming out of them must have two caps placed back-to-back as if it was
    really two points connected to each other by an infinitesimally short straight line in the
    direction of the point's <i>directionality</i> (as defined above).</p>

    <p><strong>Joins</strong>: In addition to the point where a join occurs, two additional points
    are relevant to each join, one for each line: the two corners found half the line width away
    from the join point, one perpendicular to each line, each on the side furthest from the other
    line.</p>

    <p>A triangle connecting these two opposite corners with a straight line, with the third point
    of the triangle being the join point, must be added at all joins. The <code id=line-styles:dom-context-2d-linejoin-5><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls whether anything else is
    rendered. The three aforementioned values have the following meanings:</p>

    <p>The "<code>bevel</code>" value means that this is all that is rendered at
    joins.</p>

    <p>The "<code>round</code>" value means that an arc connecting the two aforementioned
    corners of the join, abutting (and not overlapping) the aforementioned triangle, with the
    diameter equal to the line width and the origin at the point of the join, must be added at
    joins.</p>

    <p>The "<code>miter</code>" value means that a second triangle must (if it can given
    the miter length) be added at the join, with one line being the line between the two
    aforementioned corners, abutting the first triangle, and the other two being continuations of
    the outside edges of the two joining lines, as long as required to intersect without going over
    the miter length.</p>

    <p>The miter length is the distance from the point where the join occurs to the intersection of
    the line edges on the outside of the join. The miter limit ratio is the maximum allowed ratio of
    the miter length to half the line width. If the miter length would cause the miter limit ratio
    (as set by <var>style</var>'s <code id=line-styles:dom-context-2d-miterlimit-3><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute) to be exceeded, then this second
    triangle must not be added.</p> 



    <p>The subpaths in the newly created path must be oriented such that for any point, the number
    of times a half-infinite straight line drawn from that point crosses a subpath is even if and
    only if the number of times a half-infinite straight line drawn from that same point crosses a
    subpath going in one direction is equal to the number of times it crosses a subpath going in the
    other direction.</p>
   <li><p>Return the newly created path.</ol>



  


  <h6 id=text-styles><span class=secno>4.12.5.1.5</span> Text styles<a href=#text-styles class=self-link></a></h6>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-lang id=dom-context-2d-lang-dev>lang</a> [ = <var>value</var> ]</code><dt><code><var>styles</var>.<a href=#dom-context-2d-lang id=text-styles:dom-context-2d-lang>lang</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current language setting.</p>

    <p>Can be set to a BCP 47 language tag, the empty string, or "<code id=text-styles:dom-context-2d-lang-inherit><a href=#dom-context-2d-lang-inherit>inherit</a></code>", to change the language used when
    resolving fonts. "<code id=text-styles:dom-context-2d-lang-inherit-2><a href=#dom-context-2d-lang-inherit>inherit</a></code>" takes the language
    from the <code id=text-styles:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element's language, or the associated <a id=text-styles:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document
    element</a> when there is no <code id=text-styles:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> element.</p>

    <p>The default is "<code id=text-styles:dom-context-2d-lang-inherit-3><a href=#dom-context-2d-lang-inherit>inherit</a></code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-font id=dom-context-2d-font-dev>font</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font title="The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.">CanvasRenderingContext2D/font</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-font id=text-styles:dom-context-2d-font>font</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current font settings.</p>

    <p>Can be set, to change the font. The syntax is the same as for the CSS <a id="text-styles:'font'" href=https://drafts.csswg.org/css-fonts/#font-prop data-x-internal="'font'">'font'</a>
    property; values that cannot be parsed as CSS font values are ignored. The default is "10px
    sans-serif".</p>

    <p>Relative keywords and lengths are computed relative to the font of the <code id=text-styles:the-canvas-element-3><a href=#the-canvas-element>canvas</a></code>
    element.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-textalign id=dom-context-2d-textalign-dev>textAlign</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign title="The CanvasRenderingContext2D.textAlign property of the Canvas 2D API specifies the current text alignment used when drawing text.">CanvasRenderingContext2D/textAlign</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-textalign id=text-styles:dom-context-2d-textalign>textAlign</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current text alignment settings.</p>

    <p>Can be set, to change the alignment. The possible values are and their meanings are given
    below. Other values are ignored. The default is "<code>start</code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-textbaseline id=dom-context-2d-textbaseline-dev>textBaseline</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline title="The CanvasRenderingContext2D.textBaseline property of the Canvas 2D API specifies the current text baseline used when drawing text.">CanvasRenderingContext2D/textBaseline</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-textbaseline id=text-styles:dom-context-2d-textbaseline>textBaseline</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current baseline alignment settings.</p>

    <p>Can be set, to change the baseline alignment. The possible values and their meanings are
    given below. Other values are ignored. The default is "<code id=text-styles:dom-context-2d-textbaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-direction id=dom-context-2d-direction-dev>direction</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction title="The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text direction used to draw text.">CanvasRenderingContext2D/direction</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>101+</span></span><span class="safari yes"><span>Safari</span><span>9+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>styles</var>.<a href=#dom-context-2d-direction id=text-styles:dom-context-2d-direction>direction</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current directionality.</p>

    <p>Can be set, to change the directionality. The possible values and their meanings are given
    below. Other values are ignored. The default is "<code id=text-styles:dom-context-2d-direction-inherit><a href=#dom-context-2d-direction-inherit>inherit</a></code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-letterspacing id=dom-context-2d-letterspacing-dev>letterSpacing</a> [ = <var>value</var> ]</code><dt><code><var>styles</var>.<a href=#dom-context-2d-letterspacing id=text-styles:dom-context-2d-letterspacing>letterSpacing</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current spacing between characters in the text.</p>

    <p>Can be set, to change spacing between characters. Values that cannot be parsed as a CSS
    <a id=text-styles:length-2 href=https://drafts.csswg.org/css-values/#lengths data-x-internal=length-2>&lt;length></a> are ignored. The default is "<code>0px</code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-fontkerning id=dom-context-2d-fontkerning-dev>fontKerning</a> [ = <var>value</var> ]</code><dt><code><var>styles</var>.<a href=#dom-context-2d-fontkerning id=text-styles:dom-context-2d-fontkerning>fontKerning</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current font kerning settings.</p>

    <p>Can be set, to change the font kerning. The possible values and their meanings are given
    below. Other values are ignored. The default is "<code id=text-styles:dom-context-2d-fontkerning-auto><a href=#dom-context-2d-fontkerning-auto>auto</a></code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-fontstretch id=dom-context-2d-fontstretch-dev>fontStretch</a> [ = <var>value</var> ]</code><dt><code><var>styles</var>.<a href=#dom-context-2d-fontstretch id=text-styles:dom-context-2d-fontstretch>fontStretch</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current font stretch settings.</p>

    <p>Can be set, to change the font stretch. The possible values and their meanings are given
    below. Other values are ignored. The default is "<code id=text-styles:dom-context-2d-fontstretch-normal><a href=#dom-context-2d-fontstretch-normal>normal</a></code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-fontvariantcaps id=dom-context-2d-fontvariantcaps-dev>fontVariantCaps</a> [ = <var>value</var> ]</code><dt><code><var>styles</var>.<a href=#dom-context-2d-fontvariantcaps id=text-styles:dom-context-2d-fontvariantcaps>fontVariantCaps</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current font variant caps settings.</p>

    <p>Can be set, to change the font variant caps. The possible values and their meanings are given
    below. Other values are ignored. The default is "<code id=text-styles:dom-context-2d-fontvariantcaps-normal><a href=#dom-context-2d-fontvariantcaps-normal>normal</a></code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-textrendering id=dom-context-2d-textrendering-dev>textRendering</a> [ = <var>value</var> ]</code><dt><code><var>styles</var>.<a href=#dom-context-2d-textrendering id=text-styles:dom-context-2d-textrendering>textRendering</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current text rendering settings.</p>

    <p>Can be set, to change the text rendering. The possible values and their meanings are given
    below. Other values are ignored. The default is "<code id=text-styles:dom-context-2d-textrendering-auto><a href=#dom-context-2d-textrendering-auto>auto</a></code>".</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-wordspacing id=dom-context-2d-wordspacing-dev>wordSpacing</a> [ = <var>value</var> ]</code><dt><code><var>styles</var>.<a href=#dom-context-2d-wordspacing id=text-styles:dom-context-2d-wordspacing>wordSpacing</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current spacing between words in the text.</p>

    <p>Can be set, to change spacing between words. Values that cannot be parsed as a CSS
    <a id=text-styles:length-2-2 href=https://drafts.csswg.org/css-values/#lengths data-x-internal=length-2>&lt;length></a> are ignored. The default is "<code>0px</code>".</p>
   </dl>

  

  <p>Objects that implement the <code id=text-styles:canvastextdrawingstyles><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface have attributes
  (defined in this section) that control how text is laid out (rasterized or outlined) by the
  object. Such objects can also have a <dfn id=font-style-source-object>font style source object</dfn>. For
  <code id=text-styles:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, this is the <code id=text-styles:the-canvas-element-4><a href=#the-canvas-element>canvas</a></code> element given by
  the value of the context's <code id=text-styles:dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute. For
  <code id=text-styles:offscreencanvasrenderingcontext2d><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code> objects, this is the <a href=#associated-offscreencanvas-object id=text-styles:associated-offscreencanvas-object>associated
  <code>OffscreenCanvas</code> object</a>.</p>

  <p>Font resolution for the <a href=#font-style-source-object id=text-styles:font-style-source-object>font style source object</a> requires a <a id=text-styles:font-source href=https://drafts.csswg.org/css-font-loading/#font-source data-x-internal=font-source>font
  source</a>. This is determined for a given <var>object</var> implementing
  <code id=text-styles:canvastextdrawingstyles-2><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> by the following steps: <a href=references.html#refsCSSFONTLOAD>[CSSFONTLOAD]</a></p>

  <ol><li><p>If <var>object</var>'s <a href=#font-style-source-object id=text-styles:font-style-source-object-2>font style source object</a> is a <code id=text-styles:the-canvas-element-5><a href=#the-canvas-element>canvas</a></code>
   element, return the element's <a id=text-styles:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>
    <p>Otherwise, <var>object</var>'s <a href=#font-style-source-object id=text-styles:font-style-source-object-3>font style source object</a> is an
    <code id=text-styles:offscreencanvas><a href=#offscreencanvas>OffscreenCanvas</a></code> object:</p>

    <ol><li><p>Let <var>global</var> be <var>object</var>'s <a id=text-styles:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global
     object</a>.<li><p>If <var>global</var> is a <code id=text-styles:window><a href=nav-history-apis.html#window>Window</a></code> object, then return <var>global</var>'s
     <a href=nav-history-apis.html#concept-document-window id=text-styles:concept-document-window>associated <code>Document</code></a>.<li><p><a id=text-styles:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>global</var> implements
     <code id=text-styles:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code>.<li><p>Return <var>global</var>.</ol>
   </ol>

  <div class=example>
   <p>This is an example of font resolution with a regular <code id=text-styles:the-canvas-element-6><a href=#the-canvas-element>canvas</a></code> element with ID <code>c1</code>.</p>

   <pre><code class='js'><c- a>const</c-> font <c- o>=</c-> <c- k>new</c-> FontFace<c- p>(</c-><c- u>&quot;MyCanvasFont&quot;</c-><c- p>,</c-> <c- u>&quot;url(mycanvasfont.ttf)&quot;</c-><c- p>);</c->
documents<c- p>.</c->fonts<c- p>.</c->add<c- p>(</c->font<c- p>);</c->

<c- a>const</c-> context <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>&quot;c1&quot;</c-><c- p>).</c->getContext<c- p>(</c-><c- u>&quot;2d&quot;</c-><c- p>);</c->
document<c- p>.</c->fonts<c- p>.</c->ready<c- p>.</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
  context<c- p>.</c->font <c- o>=</c-> <c- u>&quot;64px MyCanvasFont&quot;</c-><c- p>;</c->
  context<c- p>.</c->fillText<c- p>(</c-><c- u>&quot;hello&quot;</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->
<c- p>});</c-></code></pre>

   <p>In this example, the canvas will display text using <code>mycanvasfont.ttf</code> as
   its font.</p>
  </div>

  <div class=example>
   <p>This is an example of how font resolution can happen using <code id=text-styles:offscreencanvas-2><a href=#offscreencanvas>OffscreenCanvas</a></code>.
   Assuming a <code id=text-styles:the-canvas-element-7><a href=#the-canvas-element>canvas</a></code> element with ID <code>c2</code> which is transferred to
   a worker like so:</p>

   <pre><code class='js'><c- a>const</c-> offscreenCanvas <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>&quot;c2&quot;</c-><c- p>).</c->transferControlToOffscreen<c- p>();</c->
worker<c- p>.</c->postMessage<c- p>(</c->offscreenCanvas<c- p>,</c-> <c- p>[</c->offscreenCanvas<c- p>]);</c-></code></pre>

   <p>Then, in the worker:</p>
   <pre><code class='js'>self<c- p>.</c->onmessage <c- o>=</c-> <c- a>function</c-><c- p>(</c->ev<c- p>)</c-> <c- p>{</c->
  <c- a>const</c-> transferredCanvas <c- o>=</c-> ev<c- p>.</c->data<c- p>;</c->
  <c- a>const</c-> context <c- o>=</c-> transferredCanvas<c- p>.</c->getContext<c- p>(</c-><c- u>&quot;2d&quot;</c-><c- p>);</c->
  <c- a>const</c-> font <c- o>=</c-> <c- k>new</c-> FontFace<c- p>(</c-><c- u>&quot;MyFont&quot;</c-><c- p>,</c-> <c- u>&quot;url(myfont.ttf)&quot;</c-><c- p>);</c->
  self<c- p>.</c->fonts<c- p>.</c->add<c- p>(</c->font<c- p>);</c->
  self<c- p>.</c->fonts<c- p>.</c->ready<c- p>.</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
    context<c- p>.</c->font <c- o>=</c-> <c- u>&quot;64px MyFont&quot;</c-><c- p>;</c->
    context<c- p>.</c->fillText<c- p>(</c-><c- u>&quot;hello&quot;</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->
  <c- p>});</c->
<c- p>};</c-></code></pre>

   <p>In this example, the canvas will display a text using <code>myfont.ttf</code>.
   Notice that the font is only loaded inside the worker, and not in the document context.</p>
  </div>

  <p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-font data-dfn-type=attribute><code>font</code></dfn> IDL attribute, on setting, must be <a href=https://drafts.csswg.org/css-syntax/#parse-grammar id=text-styles:parse-something-according-to-a-css-grammar data-x-internal=parse-something-according-to-a-css-grammar>parsed as a CSS &lt;'font'> value</a> (but
  without supporting property-independent style sheet syntax like 'inherit'), and the resulting font
  must be assigned to the context, with the <a id="text-styles:'line-height'" href=https://drafts.csswg.org/css2/#propdef-line-height data-x-internal="'line-height'">'line-height'</a> component forced to 'normal',
  with the <a id="text-styles:'font-size'" href=https://drafts.csswg.org/css-fonts/#font-size-prop data-x-internal="'font-size'">'font-size'</a> component converted to <a href=https://drafts.csswg.org/css-values/#px id="text-styles:'px'" data-x-internal="'px'">CSS pixels</a>,
  and with system fonts being computed to explicit values. If the new value is syntactically
  incorrect (including using property-independent style sheet syntax like 'inherit' or 'initial'),
  then it must be ignored, without assigning a new font value. <a href=references.html#refsCSS>[CSS]</a></p>

  <p>Font family names must be interpreted in the context of the <a href=#font-style-source-object id=text-styles:font-style-source-object-4>font style source
  object</a> when the font is to be used; any fonts embedded using <code>@font-face</code> or loaded using <code id=text-styles:fontface><a href=infrastructure.html#fontface>FontFace</a></code> objects that are visible to the
  <a href=#font-style-source-object id=text-styles:font-style-source-object-5>font style source object</a> must therefore be available once they are loaded. (Each <a href=#font-style-source-object id=text-styles:font-style-source-object-6>font style source
  object</a> has a <a id=text-styles:font-source-2 href=https://drafts.csswg.org/css-font-loading/#font-source data-x-internal=font-source>font source</a>, which determines what fonts are available.) If a font
  is used before it is fully loaded, or if the <a href=#font-style-source-object id=text-styles:font-style-source-object-7>font style source object</a> does not have
  that font in scope at the time the font is to be used, then it must be treated as if it was an
  unknown font, falling back to another as described by the relevant CSS specifications.
  <a href=references.html#refsCSSFONTS>[CSSFONTS]</a> <a href=references.html#refsCSSFONTLOAD>[CSSFONTLOAD]</a></p>

  <p>On getting, the <code id=text-styles:dom-context-2d-font-2><a href=#dom-context-2d-font>font</a></code> attribute must return the <a href=https://drafts.csswg.org/cssom/#serialize-a-css-value id=text-styles:serializing-a-css-value data-x-internal=serializing-a-css-value>serialized form</a> of the current font of the context (with
  no <a id="text-styles:'line-height'-2" href=https://drafts.csswg.org/css2/#propdef-line-height data-x-internal="'line-height'">'line-height'</a> component). <a href=references.html#refsCSSOM>[CSSOM]</a></p>

  <div class=example>

   <p>For example, after the following statement:</p>

   <pre><code class='js'>context<c- p>.</c->font <c- o>=</c-> <c- t>&apos;italic 400 12px/2 Unknown Font, sans-serif&apos;</c-><c- p>;</c-></code></pre>

   <p>...the expression <code>context.font</code> would evaluate to the string "<code>italic 12px "Unknown Font", sans-serif</code>". The "400"
   font-weight doesn't appear because that is the default value. The line-height doesn't appear
   because it is forced to "normal", the default value.</p>

  </div>

  <p>When the object implementing the <code id=text-styles:canvastextdrawingstyles-3><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created, the
  font of the context must be set to 10px sans-serif. When the <a id="text-styles:'font-size'-2" href=https://drafts.csswg.org/css-fonts/#font-size-prop data-x-internal="'font-size'">'font-size'</a> component is
  set to lengths using percentages, <a id="text-styles:'em'" href=https://drafts.csswg.org/css-values/#em data-x-internal="'em'">'em'</a> or <a id="text-styles:'ex'" href=https://drafts.csswg.org/css-values/#ex data-x-internal="'ex'">'ex'</a> units, or the 'larger' or
  'smaller' keywords, these must be interpreted relative to the <a id=text-styles:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of the
  <a id="text-styles:'font-size'-3" href=https://drafts.csswg.org/css-fonts/#font-size-prop data-x-internal="'font-size'">'font-size'</a> property of the <a href=#font-style-source-object id=text-styles:font-style-source-object-8>font style source object</a> at the time that
  the attribute is set, if it is an element. When the <a id="text-styles:'font-weight'" href=https://drafts.csswg.org/css-fonts/#font-weight-prop data-x-internal="'font-weight'">'font-weight'</a> component is set to
  the relative values 'bolder' and 'lighter', these must be interpreted relative to the
  <a id=text-styles:computed-value-2 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of the <a id="text-styles:'font-weight'-2" href=https://drafts.csswg.org/css-fonts/#font-weight-prop data-x-internal="'font-weight'">'font-weight'</a> property of the <a href=#font-style-source-object id=text-styles:font-style-source-object-9>font style
  source object</a> at the time that the attribute is set, if it is an element. If the <a href=https://drafts.csswg.org/css-cascade/#computed-value id=text-styles:computed-value-3 data-x-internal=computed-value>computed values</a> are undefined for a particular case (e.g. because
  the <a href=#font-style-source-object id=text-styles:font-style-source-object-10>font style source object</a> is not an element or is not <a id=text-styles:being-rendered href=rendering.html#being-rendered>being
  rendered</a>), then the relative keywords must be interpreted relative to the normal-weight
  10px sans-serif default.</p>

  <p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-textalign data-dfn-type=attribute><code>textAlign</code></dfn> IDL attribute, on getting, must return
  the current value. On setting, the current value must be changed to the new value. When the object
  implementing the <code id=text-styles:canvastextdrawingstyles-4><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created, the <code id=text-styles:dom-context-2d-textalign-2><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must initially have the value <code id=text-styles:dom-context-2d-textalign-start><a href=#dom-context-2d-textalign-start>start</a></code>.</p>

  <p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-textbaseline data-dfn-type=attribute><code>textBaseline</code></dfn> IDL attribute, on getting, must
  return the current value. On setting, the current value must be changed to the new value. When the
  object implementing the <code id=text-styles:canvastextdrawingstyles-5><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created, the <code id=text-styles:dom-context-2d-textbaseline-2><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute must initially have the value
  <code id=text-styles:dom-context-2d-textbaseline-alphabetic-2><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>.</p>

  <p>Objects that implement the <code id=text-styles:canvastextdrawingstyles-6><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface have an associated
  <dfn id=concept-canvastextdrawingstyles-language>language</dfn> value used to localize font
  rendering. Valid values are a BCP 47 language tag, the empty string, or "<dfn id=dom-context-2d-lang-inherit>inherit</dfn>" where the language comes from the
  <code id=text-styles:the-canvas-element-8><a href=#the-canvas-element>canvas</a></code> element's language, or the associated <a id=text-styles:document-element-2 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> when there
  is no <code id=text-styles:the-canvas-element-9><a href=#the-canvas-element>canvas</a></code> element. Initially, the <a href=#concept-canvastextdrawingstyles-language id=text-styles:concept-canvastextdrawingstyles-language>language</a> must be "<code id=text-styles:dom-context-2d-lang-inherit-4><a href=#dom-context-2d-lang-inherit>inherit</a></code>".</p>

  <p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-lang data-dfn-type=attribute><code>lang</code></dfn> getter steps are to return
  <a id=text-styles:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvastextdrawingstyles-language id=text-styles:concept-canvastextdrawingstyles-language-2>language</a>.</p>

  <p>The <code id=text-styles:dom-context-2d-lang-2><a href=#dom-context-2d-lang>lang</a></code> setter steps are to set <a id=text-styles:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
  <a href=#concept-canvastextdrawingstyles-language id=text-styles:concept-canvastextdrawingstyles-language-3>language</a> to the given value.</p>

  <p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-direction data-dfn-type=attribute><code>direction</code></dfn> IDL attribute, on getting, must return
  the current value. On setting, the current value must be changed to the new value. When the object
  implementing the <code id=text-styles:canvastextdrawingstyles-7><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created, the <code id=text-styles:dom-context-2d-direction-2><a href=#dom-context-2d-direction>direction</a></code> attribute must initially have the value "<code id=text-styles:dom-context-2d-direction-inherit-2><a href=#dom-context-2d-direction-inherit>inherit</a></code>".</p>

  <p>Objects that implement the <code id=text-styles:canvastextdrawingstyles-8><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface have attributes that
  control the spacing between letters and words. Such objects have associated <dfn id=concept-canvastextdrawingstyles-letter-spacing>letter spacing</dfn> and <dfn id=concept-canvastextdrawingstyles-word-spacing>word spacing</dfn> values, which are CSS
  <a id=text-styles:length-2-3 href=https://drafts.csswg.org/css-values/#lengths data-x-internal=length-2>&lt;length></a> values. Initially, both must be the result of <a href=https://drafts.csswg.org/css-syntax/#parse-grammar id=text-styles:parse-something-according-to-a-css-grammar-2 data-x-internal=parse-something-according-to-a-css-grammar>parsing</a> "<code>0px</code>" as a CSS
  <a id=text-styles:length-2-4 href=https://drafts.csswg.org/css-values/#lengths data-x-internal=length-2>&lt;length></a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing title="The CanvasRenderingContext2D.letterSpacing property of the Canvas API specifies the spacing between letters when drawing text.">CanvasRenderingContext2D/letterSpacing</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-letterspacing data-dfn-type=attribute><code>letterSpacing</code></dfn> getter steps are to return
  the <a href=https://drafts.csswg.org/cssom/#serialize-a-css-value id=text-styles:serializing-a-css-value-2 data-x-internal=serializing-a-css-value>serialized form</a> of <a id=text-styles:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvastextdrawingstyles-letter-spacing id=text-styles:concept-canvastextdrawingstyles-letter-spacing>letter spacing</a>.</p>

  <p>The <code id=text-styles:dom-context-2d-letterspacing-2><a href=#dom-context-2d-letterspacing>letterSpacing</a></code> setter steps are:</p>

  <ol><li><p>Let <var>parsed</var> be the result of <a href=https://drafts.csswg.org/css-syntax/#parse-grammar id=text-styles:parse-something-according-to-a-css-grammar-3 data-x-internal=parse-something-according-to-a-css-grammar>parsing</a> the given value as a CSS <a id=text-styles:length-2-5 href=https://drafts.csswg.org/css-values/#lengths data-x-internal=length-2>&lt;length></a>.<li><p>If <var>parsed</var> is failure, then return.<li><p>Set <a id=text-styles:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvastextdrawingstyles-letter-spacing id=text-styles:concept-canvastextdrawingstyles-letter-spacing-2>letter spacing</a> to
   <var>parsed</var>.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/wordSpacing title="The CanvasRenderingContext2D.wordSpacing property of the Canvas API specifies the spacing between words when drawing text.">CanvasRenderingContext2D/wordSpacing</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-wordspacing data-dfn-type=attribute><code>wordSpacing</code></dfn> getter steps are to return the
  <a href=https://drafts.csswg.org/cssom/#serialize-a-css-value id=text-styles:serializing-a-css-value-3 data-x-internal=serializing-a-css-value>serialized form</a> of <a id=text-styles:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvastextdrawingstyles-word-spacing id=text-styles:concept-canvastextdrawingstyles-word-spacing>word spacing</a>.</p>

  <p>The <code id=text-styles:dom-context-2d-wordspacing-2><a href=#dom-context-2d-wordspacing>wordSpacing</a></code> setter steps are:</p>

  <ol><li><p>Let <var>parsed</var> be the result of <a href=https://drafts.csswg.org/css-syntax/#parse-grammar id=text-styles:parse-something-according-to-a-css-grammar-4 data-x-internal=parse-something-according-to-a-css-grammar>parsing</a> the given value as a CSS <a id=text-styles:length-2-6 href=https://drafts.csswg.org/css-values/#lengths data-x-internal=length-2>&lt;length></a>.<li><p>If <var>parsed</var> is failure, then return.<li><p>Set <a id=text-styles:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvastextdrawingstyles-word-spacing id=text-styles:concept-canvastextdrawingstyles-word-spacing-2>word
   spacing</a> to <var>parsed</var>.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontKerning title="The CanvasRenderingContext2D.fontKerning property of the Canvas API specifies how font kerning information is used.">CanvasRenderingContext2D/fontKerning</a><div class=support><span class="firefox yes"><span>Firefox</span><span>104+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-fontkerning data-dfn-type=attribute><code>fontKerning</code></dfn> IDL attribute, on
  getting, must return the current value. On setting, the current value must be changed to the new
  value. When the object implementing the <code id=text-styles:canvastextdrawingstyles-9><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created,
  the <code id=text-styles:dom-context-2d-fontkerning-2><a href=#dom-context-2d-fontkerning>fontKerning</a></code> attribute must
  initially have the value "<code id=text-styles:dom-context-2d-fontkerning-auto-2><a href=#dom-context-2d-fontkerning-auto>auto</a></code>".</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontStretch title="The CanvasRenderingContext2D.fontStretch property of the Canvas API specifies how the font may be expanded or condensed when drawing text.">CanvasRenderingContext2D/fontStretch</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-fontstretch data-dfn-type=attribute><code>fontStretch</code></dfn> IDL attribute, on
  getting, must return the current value. On setting, the current value must be changed to the new
  value. When the object implementing the <code id=text-styles:canvastextdrawingstyles-10><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created,
  the <code id=text-styles:dom-context-2d-fontstretch-2><a href=#dom-context-2d-fontstretch>fontStretch</a></code> attribute must
  initially have the value "<code id=text-styles:dom-context-2d-fontstretch-normal-2><a href=#dom-context-2d-fontstretch-normal>normal</a></code>".</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps title="The CanvasRenderingContext2D.fontVariantCaps property of the Canvas API specifies an alternative capitalization of the rendered text.">CanvasRenderingContext2D/fontVariantCaps</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-fontvariantcaps data-dfn-type=attribute><code>fontVariantCaps</code></dfn> IDL attribute, on
  getting, must return the current value. On setting, the current value must be changed to the new
  value. When the object implementing the <code id=text-styles:canvastextdrawingstyles-11><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created,
  the <code id=text-styles:dom-context-2d-fontvariantcaps-2><a href=#dom-context-2d-fontvariantcaps>fontVariantCaps</a></code> attribute must
  initially have the value "<code id=text-styles:dom-context-2d-fontvariantcaps-normal-2><a href=#dom-context-2d-fontvariantcaps-normal>normal</a></code>".</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textRendering title="The CanvasRenderingContext2D.textRendering property of the Canvas API provides information to the rendering engine about what to optimize for when rendering text.">CanvasRenderingContext2D/textRendering</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasTextDrawingStyles id=dom-context-2d-textrendering data-dfn-type=attribute><code>textRendering</code></dfn> IDL attribute, on
  getting, must return the current value. On setting, the current value must be changed to the new
  value. When the object implementing the <code id=text-styles:canvastextdrawingstyles-12><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interface is created,
  the <code id=text-styles:dom-context-2d-textrendering-2><a href=#dom-context-2d-textrendering>textRendering</a></code> attribute must
  initially have the value "<code id=text-styles:dom-context-2d-textrendering-auto-2><a href=#dom-context-2d-textrendering-auto>auto</a></code>".</p>
  

  <p>The <code id=text-styles:dom-context-2d-textalign-3><a href=#dom-context-2d-textalign>textAlign</a></code> attribute's allowed keywords are
  as follows:</p>

  <dl><dt><dfn data-dfn-for=CanvasTextAlign id=dom-context-2d-textalign-start data-dfn-type=enum-value><code>start</code></dfn>
   <dd><p>Align to the start edge of the text (left side in left-to-right text, right side in
   right-to-left text).<dt><dfn data-dfn-for=CanvasTextAlign id=dom-context-2d-textalign-end data-dfn-type=enum-value><code>end</code></dfn>
   <dd><p>Align to the end edge of the text (right side in left-to-right text, left side in
   right-to-left text).<dt><dfn data-dfn-for=CanvasTextAlign id=dom-context-2d-textalign-left data-dfn-type=enum-value><code>left</code></dfn>
   <dd><p>Align to the left.<dt><dfn data-dfn-for=CanvasTextAlign id=dom-context-2d-textalign-right data-dfn-type=enum-value><code>right</code></dfn>
   <dd><p>Align to the right.<dt><dfn data-dfn-for=CanvasTextAlign id=dom-context-2d-textalign-center data-dfn-type=enum-value><code>center</code></dfn>
   <dd><p>Align to the center.</dl>

  <p>The <code id=text-styles:dom-context-2d-textbaseline-3><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
  attribute's allowed keywords correspond to alignment points in the
  font:</p>

  <p><img src=../images/baselines.png width=738 alt="The em-over baseline is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the em-over and em-under baselines, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic-under baseline is where glyphs like 私 and 達 are anchored, and the em-under baseline is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside em-over and em-under baselines." height=300></p>

  <p>The keywords map to these alignment points as follows:</p>

  <dl><dt><dfn data-dfn-for=CanvasTextBaseline id=dom-context-2d-textbaseline-top data-dfn-type=enum-value><code>top</code></dfn>
   <dd>The <a id=text-styles:em-over-baseline href=https://drafts.csswg.org/css-inline/#em-over-baseline data-x-internal=em-over-baseline>em-over baseline</a><dt><dfn data-dfn-for=CanvasTextBaseline id=dom-context-2d-textbaseline-hanging data-dfn-type=enum-value><code>hanging</code></dfn>
   <dd>The <a id=text-styles:hanging-baseline href=https://drafts.csswg.org/css-inline/#hanging-baseline data-x-internal=hanging-baseline>hanging baseline</a><dt><dfn data-dfn-for=CanvasTextBaseline id=dom-context-2d-textbaseline-middle data-dfn-type=enum-value><code>middle</code></dfn>
   <dd>Halfway between the <a id=text-styles:em-over-baseline-2 href=https://drafts.csswg.org/css-inline/#em-over-baseline data-x-internal=em-over-baseline>em-over baseline</a> and the <a id=text-styles:em-under-baseline href=https://drafts.csswg.org/css-inline/#em-under-baseline data-x-internal=em-under-baseline>em-under baseline</a><dt><dfn data-dfn-for=CanvasTextBaseline id=dom-context-2d-textbaseline-alphabetic data-dfn-type=enum-value><code>alphabetic</code></dfn>
   <dd>The <a id=text-styles:alphabetic-baseline href=https://drafts.csswg.org/css-inline/#alphabetic-baseline data-x-internal=alphabetic-baseline>alphabetic baseline</a><dt><dfn data-dfn-for=CanvasTextBaseline id=dom-context-2d-textbaseline-ideographic data-dfn-type=enum-value><code>ideographic</code></dfn>
   <dd>The <a id=text-styles:ideographic-under-baseline href=https://drafts.csswg.org/css-inline/#ideographic-under-baseline data-x-internal=ideographic-under-baseline>ideographic-under baseline</a><dt><dfn data-dfn-for=CanvasTextBaseline id=dom-context-2d-textbaseline-bottom data-dfn-type=enum-value><code>bottom</code></dfn>
   <dd>The <a id=text-styles:em-under-baseline-2 href=https://drafts.csswg.org/css-inline/#em-under-baseline data-x-internal=em-under-baseline>em-under baseline</a></dl>

  <p>The <code id=text-styles:dom-context-2d-direction-3><a href=#dom-context-2d-direction>direction</a></code> attribute's allowed keywords are
  as follows:</p>

  <dl><dt><dfn data-dfn-for=CanvasDirection id=dom-context-2d-direction-ltr data-dfn-type=enum-value><code>ltr</code></dfn>

   <dd><p>Treat input to the <a href=#text-preparation-algorithm id=text-styles:text-preparation-algorithm>text preparation algorithm</a> as left-to-right text.<dt><dfn data-dfn-for=CanvasDirection id=dom-context-2d-direction-rtl data-dfn-type=enum-value><code>rtl</code></dfn>

   <dd><p>Treat input to the <a href=#text-preparation-algorithm id=text-styles:text-preparation-algorithm-2>text preparation algorithm</a> as right-to-left text.<dt><dfn data-dfn-for=CanvasDirection id=dom-context-2d-direction-inherit data-dfn-type=enum-value><code>inherit</code></dfn>

   <dd><p>Use the process in the <a href=#text-preparation-algorithm id=text-styles:text-preparation-algorithm-3>text preparation algorithm</a> to obtain the text
   direction from the <code id=text-styles:the-canvas-element-10><a href=#the-canvas-element>canvas</a></code> element, <a href=#offscreencanvas-placeholder id=text-styles:offscreencanvas-placeholder>placeholder <code>canvas</code> element</a>, or
   <a id=text-styles:document-element-3 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>.</dl>

  <p>The <code id=text-styles:dom-context-2d-fontkerning-3><a href=#dom-context-2d-fontkerning>fontKerning</a></code> attribute's allowed keywords
  are as follows:</p>

  <dl><dt><dfn data-dfn-for=CanvasFontKerning id=dom-context-2d-fontkerning-auto data-dfn-type=enum-value><code>auto</code></dfn>
   <dd><p>Kerning is applied at the discretion of the user agent.<dt><dfn data-dfn-for=CanvasFontKerning id=dom-context-2d-fontkerning-normal data-dfn-type=enum-value><code>normal</code></dfn>
   <dd><p>Kerning is applied.<dt><dfn data-dfn-for=CanvasFontKerning id=dom-context-2d-fontkerning-none data-dfn-type=enum-value><code>none</code></dfn>
   <dd><p>Kerning is not applied.</dl>

  <p>The <code id=text-styles:dom-context-2d-fontstretch-3><a href=#dom-context-2d-fontstretch>fontStretch</a></code> attribute's allowed keywords
  are as follows:</p>

  <dl><dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-ultra-condensed data-dfn-type=enum-value><code>ultra-condensed</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'ultra-condensed'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-ultra-condensed data-x-internal="'ultra-condensed'">'ultra-condensed'</a> setting.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-extra-condensed data-dfn-type=enum-value><code>extra-condensed</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'-2" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'extra-condensed'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-extra-condensed data-x-internal="'extra-condensed'">'extra-condensed'</a> setting.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-condensed data-dfn-type=enum-value><code>condensed</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'-3" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'condensed'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-condensed data-x-internal="'condensed'">'condensed'</a> setting.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-semi-condensed data-dfn-type=enum-value><code>semi-condensed</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'-4" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'semi-condensed'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-semi-condensed data-x-internal="'semi-condensed'">'semi-condensed'</a> setting.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-normal data-dfn-type=enum-value><code>normal</code></dfn>
   <dd><p>The default setting, where width of the glyphs is at 100%.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-semi-expanded data-dfn-type=enum-value><code>semi-expanded</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'-5" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'semi-expanded'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-semi-expanded data-x-internal="'semi-expanded'">'semi-expanded'</a> setting.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-expanded data-dfn-type=enum-value><code>expanded</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'-6" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'expanded'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-expanded data-x-internal="'expanded'">'expanded'</a> setting.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-extra-expanded data-dfn-type=enum-value><code>extra-expanded</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'-7" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'extra-expanded'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-extra-expanded data-x-internal="'extra-expanded'">'extra-expanded'</a> setting.<dt><dfn data-dfn-for=CanvasFontStretch id=dom-context-2d-fontstretch-ultra-expanded data-dfn-type=enum-value><code>ultra-expanded</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-stretch'-8" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a> <a id="text-styles:'ultra-expanded'" href=https://drafts.csswg.org/css-fonts/#valdef-font-stretch-ultra-expanded data-x-internal="'ultra-expanded'">'ultra-expanded'</a> setting.</dl>

  <p>The <code id=text-styles:dom-context-2d-fontvariantcaps-3><a href=#dom-context-2d-fontvariantcaps>fontVariantCaps</a></code> attribute's allowed
  keywords are as follows:</p>

  <dl><dt><dfn data-dfn-for=CanvasFontVariantCaps id=dom-context-2d-fontvariantcaps-normal data-dfn-type=enum-value><code>normal</code></dfn>
   <dd><p>None of the features listed below are enabled.<dt><dfn data-dfn-for=CanvasFontVariantCaps id=dom-context-2d-fontvariantcaps-small-caps data-dfn-type=enum-value><code>small-caps</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-variant-caps'" href=https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps data-x-internal="'font-variant-caps'">'font-variant-caps'</a> <a id="text-styles:'small-caps'" href=https://drafts.csswg.org/css-fonts/#valdef-font-variant-caps-small-caps data-x-internal="'small-caps'">'small-caps'</a> setting.<dt><dfn data-dfn-for=CanvasFontVariantCaps id=dom-context-2d-fontvariantcaps-all-small-caps data-dfn-type=enum-value><code>all-small-caps</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-variant-caps'-2" href=https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps data-x-internal="'font-variant-caps'">'font-variant-caps'</a> <a id="text-styles:'all-small-caps'" href=https://drafts.csswg.org/css-fonts/#valdef-font-variant-caps-all-small-caps data-x-internal="'all-small-caps'">'all-small-caps'</a> setting.<dt><dfn data-dfn-for=CanvasFontVariantCaps id=dom-context-2d-fontvariantcaps-petite-caps data-dfn-type=enum-value><code>petite-caps</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-variant-caps'-3" href=https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps data-x-internal="'font-variant-caps'">'font-variant-caps'</a> <a id="text-styles:'petite-caps'" href=https://drafts.csswg.org/css-fonts/#valdef-font-variant-caps-petite-caps data-x-internal="'petite-caps'">'petite-caps'</a> setting.<dt><dfn data-dfn-for=CanvasFontVariantCaps id=dom-context-2d-fontvariantcaps-all-petite-caps data-dfn-type=enum-value><code>all-petite-caps</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-variant-caps'-4" href=https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps data-x-internal="'font-variant-caps'">'font-variant-caps'</a> <a id="text-styles:'all-petite-caps'" href=https://drafts.csswg.org/css-fonts/#valdef-font-variant-caps-all-petite-caps data-x-internal="'all-petite-caps'">'all-petite-caps'</a> setting.<dt><dfn data-dfn-for=CanvasFontVariantCaps id=dom-context-2d-fontvariantcaps-unicase data-dfn-type=enum-value><code>unicase</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-variant-caps'-5" href=https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps data-x-internal="'font-variant-caps'">'font-variant-caps'</a> <a id="text-styles:'unicase'" href=https://drafts.csswg.org/css-fonts/#valdef-font-variant-caps-unicase data-x-internal="'unicase'">'unicase'</a> setting.<dt><dfn data-dfn-for=CanvasFontVariantCaps id=dom-context-2d-fontvariantcaps-titling-caps data-dfn-type=enum-value><code>titling-caps</code></dfn>
   <dd><p>Same as CSS <a id="text-styles:'font-variant-caps'-6" href=https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps data-x-internal="'font-variant-caps'">'font-variant-caps'</a> <a id="text-styles:'titling-caps'" href=https://drafts.csswg.org/css-fonts/#valdef-font-variant-caps-titling-caps data-x-internal="'titling-caps'">'titling-caps'</a> setting.</dl>

  <p>The <code id=text-styles:dom-context-2d-textrendering-3><a href=#dom-context-2d-textrendering>textRendering</a></code> attribute's allowed
  keywords are as follows:</p>

  <dl><dt><dfn data-dfn-for=CanvasTextRendering id=dom-context-2d-textrendering-auto data-dfn-type=enum-value><code>auto</code></dfn>
    <dd><p>Same as 'auto' in <a id=text-styles:svg-text-rendering href=https://svgwg.org/svg2-draft/painting.html#TextRendering data-x-internal=svg-text-rendering>SVG text-rendering</a> property.<dt><dfn data-dfn-for=CanvasTextRendering id=dom-context-2d-textrendering-optimizespeed data-dfn-type=enum-value><code>optimizeSpeed</code></dfn>
    <dd><p>Same as 'optimizeSpeed' in <a id=text-styles:svg-text-rendering-2 href=https://svgwg.org/svg2-draft/painting.html#TextRendering data-x-internal=svg-text-rendering>SVG text-rendering</a> property.<dt><dfn data-dfn-for=CanvasTextRendering id=dom-context-2d-textrendering-optimizelegibility data-dfn-type=enum-value><code>optimizeLegibility</code></dfn>
    <dd><p>Same as 'optimizeLegibility' in <a id=text-styles:svg-text-rendering-3 href=https://svgwg.org/svg2-draft/painting.html#TextRendering data-x-internal=svg-text-rendering>SVG text-rendering</a> property.<dt><dfn data-dfn-for=CanvasTextRendering id=dom-context-2d-textrendering-geometricprecision data-dfn-type=enum-value><code>geometricPrecision</code></dfn>
    <dd><p>Same as 'geometricPrecision' in <a id=text-styles:svg-text-rendering-4 href=https://svgwg.org/svg2-draft/painting.html#TextRendering data-x-internal=svg-text-rendering>SVG text-rendering</a> property.</dl>

  <p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes as input a string <var>text</var>,
  a <code id=text-styles:canvastextdrawingstyles-13><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> object <var>target</var>, and an optional length
  <var>maxWidth</var>. It returns an array of glyph shapes, each positioned on a common coordinate
  space, a <var>physical alignment</var> whose value is one of <i>left</i>, <i>right</i>, and
  <i>center</i>, and an <a id=text-styles:inline-box href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>. (Most callers of this algorithm ignore the
  <var>physical alignment</var> and the <a id=text-styles:inline-box-2 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>.)</p>

  <ol><li><p>If <var>maxWidth</var> was provided but is less than or equal to zero or equal to NaN,
   then return an empty array.<li><p>Replace all <a id=text-styles:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> in <var>text</var> with U+0020 SPACE
   characters.<li><p>Let <var>font</var> be the current font of <var>target</var>, as given
   by that object's <code id=text-styles:dom-context-2d-font-3><a href=#dom-context-2d-font>font</a></code> attribute.<li><p>Let <var>language</var> be the <var>target</var>'s <a href=#concept-canvastextdrawingstyles-language id=text-styles:concept-canvastextdrawingstyles-language-4>language</a>.<li>
    <p>If <var>language</var> is "<code id=text-styles:dom-context-2d-lang-inherit-5><a href=#dom-context-2d-lang-inherit>inherit</a></code>":</p>

    <ol><li><p>Let <var>sourceObject</var> be <var>object</var>'s <a href=#font-style-source-object id=text-styles:font-style-source-object-11>font style source
     object</a>.<li><p>If <var>sourceObject</var> is a <code id=text-styles:the-canvas-element-11><a href=#the-canvas-element>canvas</a></code>
     element, then set <var>language</var> to the <var>sourceObject</var>'s
     <a href=dom.html#language id=text-styles:language>language</a>.<li>
      <p>Otherwise:</p>

      <ol><li><p><a id=text-styles:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>sourceObject</var> is an <code id=text-styles:offscreencanvas-3><a href=#offscreencanvas>OffscreenCanvas</a></code> object.<li><p>Set <var>language</var> to the <var>sourceObject</var>'s
       <a href=#offscreencanvas-inherited-lang id=text-styles:offscreencanvas-inherited-lang>inherited language</a>.</ol>
     </ol>
   <li><p>If <var>language</var> is the empty string, then set <var>language</var> to
   <a href=dom.html#concept-explicitly-unknown id=text-styles:concept-explicitly-unknown>explicitly unknown</a>.<li>
    <p>Apply the appropriate step from the following list to determine the value of
    <var>direction</var>:</p>

    <dl class=switch><dt>If the <var>target</var> object's <code id=text-styles:dom-context-2d-direction-4><a href=#dom-context-2d-direction>direction</a></code> attribute has the value "<code id=text-styles:dom-context-2d-direction-ltr><a href=#dom-context-2d-direction-ltr>ltr</a></code>"<dd>Let <var>direction</var> be '<a href=dom.html#concept-ltr id=text-styles:concept-ltr>ltr</a>'.<dt>If the <var>target</var> object's <code id=text-styles:dom-context-2d-direction-5><a href=#dom-context-2d-direction>direction</a></code> attribute has the value "<code id=text-styles:dom-context-2d-direction-rtl><a href=#dom-context-2d-direction-rtl>rtl</a></code>"<dd>Let <var>direction</var> be '<a href=dom.html#concept-rtl id=text-styles:concept-rtl>rtl</a>'.<dt>If the <var>target</var> object's <code id=text-styles:dom-context-2d-direction-6><a href=#dom-context-2d-direction>direction</a></code> attribute has the value "<code id=text-styles:dom-context-2d-direction-inherit-3><a href=#dom-context-2d-direction-inherit>inherit</a></code>"<dd>
      <ol><li><p>Let <var>sourceObject</var> be <var>object</var>'s <a href=#font-style-source-object id=text-styles:font-style-source-object-12>font style source
       object</a>.<li><p>If <var>sourceObject</var> is a <code id=text-styles:the-canvas-element-12><a href=#the-canvas-element>canvas</a></code>
       element, then let <var>direction</var> be <var>sourceObject</var>'s
       <a href=dom.html#the-directionality id=text-styles:the-directionality>directionality</a>.<li>
        <p>Otherwise:</p>
        <ol><li><p><a id=text-styles:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>sourceObject</var> is an <code id=text-styles:offscreencanvas-4><a href=#offscreencanvas>OffscreenCanvas</a></code> object.<li><p>Let <var>direction</var> be <var>sourceObject</var>'s
         <a href=#offscreencanvas-inherited-direction id=text-styles:offscreencanvas-inherited-direction>inherited direction</a>.</ol>
       </ol>
     </dl>
   <li>
    <p>Form a hypothetical infinitely-wide CSS <a id=text-styles:line-box href=https://drafts.csswg.org/css2/#line-box data-x-internal=line-box>line box</a> containing a single
    <a id=text-styles:inline-box-3 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a> containing the text <var>text</var>, with the CSS
    <a id=text-styles:content-language href=https://drafts.csswg.org/css-text-4/#content-language data-x-internal=content-language>content language</a> set to <var>language</var>, and with its CSS properties set as
    follows:</p>

    <table><thead><tr><th>Property<th>Source<tbody><tr><td><a id="text-styles:'direction'" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a><td><var>direction</var><tr><td><a id="text-styles:'font'-2" href=https://drafts.csswg.org/css-fonts/#font-prop data-x-internal="'font'">'font'</a><td><var>font</var><tr><td><a id="text-styles:'font-kerning'" href=https://drafts.csswg.org/css-fonts/#propdef-font-kerning data-x-internal="'font-kerning'">'font-kerning'</a><td><var>target</var>'s <code id=text-styles:dom-context-2d-fontkerning-4><a href=#dom-context-2d-fontkerning>fontKerning</a></code><tr><td><a id="text-styles:'font-stretch'-9" href=https://drafts.csswg.org/css-fonts/#propdef-font-stretch data-x-internal="'font-stretch'">'font-stretch'</a><td><var>target</var>'s <code id=text-styles:dom-context-2d-fontstretch-4><a href=#dom-context-2d-fontstretch>fontStretch</a></code><tr><td><a id="text-styles:'font-variant-caps'-7" href=https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps data-x-internal="'font-variant-caps'">'font-variant-caps'</a><td><var>target</var>'s <code id=text-styles:dom-context-2d-fontvariantcaps-4><a href=#dom-context-2d-fontvariantcaps>fontVariantCaps</a></code><tr><td><a id="text-styles:'letter-spacing'" href=https://drafts.csswg.org/css-text/#letter-spacing-property data-x-internal="'letter-spacing'">'letter-spacing'</a><td><var>target</var>'s <a href=#concept-canvastextdrawingstyles-letter-spacing id=text-styles:concept-canvastextdrawingstyles-letter-spacing-3>letter spacing</a><tr><td><a id=text-styles:svg-text-rendering-5 href=https://svgwg.org/svg2-draft/painting.html#TextRendering data-x-internal=svg-text-rendering>SVG text-rendering</a><td><var>target</var>'s <code id=text-styles:dom-context-2d-textrendering-4><a href=#dom-context-2d-textrendering>textRendering</a></code><tr><td><a id="text-styles:'white-space'" href=https://drafts.csswg.org/css-text/#white-space-property data-x-internal="'white-space'">'white-space'</a><td>'pre'<tr><td><a id="text-styles:'word-spacing'" href=https://drafts.csswg.org/css-text/#propdef-word-spacing data-x-internal="'word-spacing'">'word-spacing'</a><td><var>target</var>'s <a href=#concept-canvastextdrawingstyles-word-spacing id=text-styles:concept-canvastextdrawingstyles-word-spacing-3>word spacing</a></table>

    <p>and with all other properties set to their initial values.</p>
   <li><p>If <var>maxWidth</var> was provided and the hypothetical width of the
   <a id=text-styles:inline-box-4 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a> in the hypothetical <a id=text-styles:line-box-2 href=https://drafts.csswg.org/css2/#line-box data-x-internal=line-box>line box</a> is greater than
   <var>maxWidth</var> <a href=https://drafts.csswg.org/css-values/#px id="text-styles:'px'-2" data-x-internal="'px'">CSS pixels</a>, then change <var>font</var> to have a
   more condensed font (if one is available or if a reasonably readable one can be synthesized by
   applying a horizontal scale factor to the font) or a smaller font, and return to the previous
   step.<li>
    <p>The <var>anchor point</var> is a point on the <a id=text-styles:inline-box-5 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, and the <var>physical
    alignment</var> is one of the values <i>left</i>, <i>right</i>, and <i>center</i>. These
    variables are determined by the <code id=text-styles:dom-context-2d-textalign-4><a href=#dom-context-2d-textalign>textAlign</a></code> and
    <code id=text-styles:dom-context-2d-textbaseline-4><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values as follows:</p>

    <p>Horizontal position:</p>

    <dl><dt>If <code id=text-styles:dom-context-2d-textalign-5><a href=#dom-context-2d-textalign>textAlign</a></code> is <code id=text-styles:dom-context-2d-textalign-left><a href=#dom-context-2d-textalign-left>left</a></code><dt>If <code id=text-styles:dom-context-2d-textalign-6><a href=#dom-context-2d-textalign>textAlign</a></code> is <code id=text-styles:dom-context-2d-textalign-start-2><a href=#dom-context-2d-textalign-start>start</a></code> and <var>direction</var> is
     'ltr'<dt>If <code id=text-styles:dom-context-2d-textalign-7><a href=#dom-context-2d-textalign>textAlign</a></code> is <code id=text-styles:dom-context-2d-textalign-end><a href=#dom-context-2d-textalign-end>end</a></code> and <var>direction</var> is 'rtl'<dd>Set the <var>anchor point</var>'s horizontal position to the left edge of the
     <a id=text-styles:inline-box-6 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, and let <var>physical alignment</var> be <i>left</i>.<dt>If <code id=text-styles:dom-context-2d-textalign-8><a href=#dom-context-2d-textalign>textAlign</a></code> is <code id=text-styles:dom-context-2d-textalign-right><a href=#dom-context-2d-textalign-right>right</a></code><dt>If <code id=text-styles:dom-context-2d-textalign-9><a href=#dom-context-2d-textalign>textAlign</a></code> is <code id=text-styles:dom-context-2d-textalign-end-2><a href=#dom-context-2d-textalign-end>end</a></code> and <var>direction</var> is 'ltr'<dt>If <code id=text-styles:dom-context-2d-textalign-10><a href=#dom-context-2d-textalign>textAlign</a></code> is <code id=text-styles:dom-context-2d-textalign-start-3><a href=#dom-context-2d-textalign-start>start</a></code> and <var>direction</var> is
     'rtl'<dd>Set the <var>anchor point</var>'s horizontal position to the right edge of the
     <a id=text-styles:inline-box-7 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, and let <var>physical alignment</var> be <i>right</i>.<dt>If <code id=text-styles:dom-context-2d-textalign-11><a href=#dom-context-2d-textalign>textAlign</a></code> is <code id=text-styles:dom-context-2d-textalign-center><a href=#dom-context-2d-textalign-center>center</a></code><dd>Set the <var>anchor point</var>'s horizontal position to half way between the left
     and right edges of the <a id=text-styles:inline-box-8 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, and let <var>physical alignment</var> be
     <i>center</i>.</dl>

    <p>Vertical position:</p>

    <dl><dt>If <code id=text-styles:dom-context-2d-textbaseline-5><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code id=text-styles:dom-context-2d-textbaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code><dd>Set the <var>anchor point</var>'s vertical position to the top of the em box of
     the <a id=text-styles:first-available-font href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a> of the <a id=text-styles:inline-box-9 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>.<dt>If <code id=text-styles:dom-context-2d-textbaseline-6><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code id=text-styles:dom-context-2d-textbaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code><dd>Set the <var>anchor point</var>'s vertical position to the <a id=text-styles:hanging-baseline-2 href=https://drafts.csswg.org/css-inline/#hanging-baseline data-x-internal=hanging-baseline>hanging baseline</a> of
     the <a id=text-styles:first-available-font-2 href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a> of the <a id=text-styles:inline-box-10 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>.<dt>If <code id=text-styles:dom-context-2d-textbaseline-7><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code id=text-styles:dom-context-2d-textbaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code><dd>Set the <var>anchor point</var>'s vertical position to half way between the bottom
     and the top of the em box of the <a id=text-styles:first-available-font-3 href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a> of the <a id=text-styles:inline-box-11 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline
     box</a>.<dt>If <code id=text-styles:dom-context-2d-textbaseline-8><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code id=text-styles:dom-context-2d-textbaseline-alphabetic-3><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code><dd>Set the <var>anchor point</var>'s vertical position to the <a id=text-styles:alphabetic-baseline-2 href=https://drafts.csswg.org/css-inline/#alphabetic-baseline data-x-internal=alphabetic-baseline>alphabetic baseline</a>
     of the <a id=text-styles:first-available-font-4 href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a> of the <a id=text-styles:inline-box-12 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>.<dt>If <code id=text-styles:dom-context-2d-textbaseline-9><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code id=text-styles:dom-context-2d-textbaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code><dd>Set the <var>anchor point</var>'s vertical position to the <a id=text-styles:ideographic-under-baseline-2 href=https://drafts.csswg.org/css-inline/#ideographic-under-baseline data-x-internal=ideographic-under-baseline>ideographic-under
     baseline</a> of the <a id=text-styles:first-available-font-5 href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a> of the <a id=text-styles:inline-box-13 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>.<dt>If <code id=text-styles:dom-context-2d-textbaseline-10><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code id=text-styles:dom-context-2d-textbaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code><dd>Set the <var>anchor point</var>'s vertical position to the bottom of the em box of
     the <a id=text-styles:first-available-font-6 href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a> of the <a id=text-styles:inline-box-14 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>.</dl>
   <li>
    <p>Let <var>result</var> be an array constructed by iterating over each glyph in the
    <a id=text-styles:inline-box-15 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a> from left to right (if any), adding to the array, for each glyph, the
    shape of the glyph as it is in the <a id=text-styles:inline-box-16 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, positioned on a coordinate space
    using <a href=https://drafts.csswg.org/css-values/#px id="text-styles:'px'-3" data-x-internal="'px'">CSS pixels</a> with its origin at the <var>anchor
    point</var>.</p>
   <li><p>Return <var>result</var>, <var>physical alignment</var>, and the inline
   box.</ol>


  <h6 id=building-paths><span class=secno>4.12.5.1.6</span> Building paths<a href=#building-paths class=self-link></a></h6>

  <p>Objects that implement the <code id=building-paths:canvaspath><a href=#canvaspath>CanvasPath</a></code> interface have a <a href=#concept-path id=building-paths:concept-path>path</a>. A <dfn id=concept-path>path</dfn> has a list of zero or
  more subpaths. Each subpath consists of a list of one or more points, connected by straight or
  curved <dfn id=line-segments>line segments</dfn>, and a flag indicating whether the subpath is closed or not. A
  closed subpath is one where the last point of the subpath is connected to the first point of the
  subpath by a straight line. Subpaths with only one point are ignored when painting the path.</p>

  <p><a href=#concept-path id=building-paths:concept-path-2>Paths</a> have a <dfn id=need-new-subpath>need new subpath</dfn> flag. When this
  flag is set, certain APIs create a new subpath rather than extending the previous one. When a
  <a href=#concept-path id=building-paths:concept-path-3>path</a> is created, its <a href=#need-new-subpath id=building-paths:need-new-subpath>need new subpath</a> flag must be
  set.</p>

  <p>When an object implementing the <code id=building-paths:canvaspath-2><a href=#canvaspath>CanvasPath</a></code> interface is created, its <a href=#concept-path id=building-paths:concept-path-4>path</a> must be initialized to zero subpaths.</p>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-moveto id=dom-context-2d-moveto-dev>moveTo</a>(<var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo title="The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y) coordinates.">CanvasRenderingContext2D/moveTo</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-moveto id=building-paths:dom-context-2d-moveto>moveTo</a>(<var>x</var>, <var>y</var>)</code><dd><p>Creates a new subpath with the given point.<dt><code><var>context</var>.<a href=#dom-context-2d-closepath id=dom-context-2d-closepath-dev>closePath</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath title="The CanvasRenderingContext2D.closePath() method of the Canvas 2D API attempts to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.">CanvasRenderingContext2D/closePath</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-closepath id=building-paths:dom-context-2d-closepath>closePath</a>()</code><dd>
    <p>Marks the current subpath as closed, and starts a new subpath with a point the same as the
    start and end of the newly closed subpath.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-lineto id=dom-context-2d-lineto-dev>lineTo</a>(<var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo title="The CanvasRenderingContext2D method lineTo(), part of the Canvas 2D API, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.">CanvasRenderingContext2D/lineTo</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-lineto id=building-paths:dom-context-2d-lineto>lineTo</a>(<var>x</var>, <var>y</var>)</code><dd>
    <p>Adds the given point to the current subpath, connected to the previous one by a straight
    line.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-quadraticcurveto id=dom-context-2d-quadraticcurveto-dev>quadraticCurveTo</a>(<var>cpx</var>, <var>cpy</var>, <var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo title="The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve.">CanvasRenderingContext2D/quadraticCurveTo</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-quadraticcurveto id=building-paths:dom-context-2d-quadraticcurveto>quadraticCurveTo</a>(<var>cpx</var>, <var>cpy</var>, <var>x</var>, <var>y</var>)</code><dd>
    <p>Adds the given point to the current subpath, connected to the previous one by a quadratic
    Bézier curve with the given control point.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-beziercurveto id=dom-context-2d-beziercurveto-dev>bezierCurveTo</a>(<var>cp1x</var>, <var>cp1y</var>, <var>cp2x</var>, <var>cp2y</var>, <var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo title="The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API adds a cubic Bézier curve to the current sub-path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the Bézier curve.">CanvasRenderingContext2D/bezierCurveTo</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-beziercurveto id=building-paths:dom-context-2d-beziercurveto>bezierCurveTo</a>(<var>cp1x</var>, <var>cp1y</var>, <var>cp2x</var>, <var>cp2y</var>, <var>x</var>, <var>y</var>)</code><dd>
    <p>Adds the given point to the current subpath, connected to the previous one by a cubic Bézier
    curve with the given control points.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-arcto id=dom-context-2d-arcto-dev>arcTo</a>(<var>x1</var>, <var>y1</var>, <var>x2</var>, <var>y2</var>, <var>radius</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo title="The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API adds a circular arc to the current sub-path, using the given control points and radius. The arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters.">CanvasRenderingContext2D/arcTo</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-arcto id=building-paths:dom-context-2d-arcto>arcTo</a>(<var>x1</var>, <var>y1</var>, <var>x2</var>, <var>y2</var>, <var>radius</var>)</code><dd>
    <p>Adds an arc with the given control points and radius to the current subpath, connected to the
    previous point by a straight line.</p>

    <p>Throws an <a id=building-paths:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=building-paths:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the given
    radius is negative.</p>

    <figure class=diagrams>
     
     <img width=357 src=../images/arcTo1.png height=254 alt="">
     <img width=468 src=../images/arcTo2.png height=310 alt="">
     <img width=513 src=../images/arcTo3.png height=233 alt="">
    </figure>


   <dt><code><var>context</var>.<a href=#dom-context-2d-arc id=dom-context-2d-arc-dev>arc</a>(<var>x</var>, <var>y</var>, <var>radius</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>counterclockwise</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc title="The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.">CanvasRenderingContext2D/arc</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-arc id=building-paths:dom-context-2d-arc>arc</a>(<var>x</var>, <var>y</var>, <var>radius</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>counterclockwise</var> ])</code><dd>
    <p>Adds points to the subpath such that the arc described by the circumference of the circle
    described by the arguments, starting at the given start angle and ending at the given end angle,
    going in the given direction (defaulting to clockwise), is added to the path, connected to the
    previous point by a straight line.</p>

    <p>Throws an <a id=building-paths:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=building-paths:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the given
    radius is negative.</p>

    <figure class=diagrams>
     
     <img width=590 src=../images/arc1.png height=255 alt="">
    </figure>


   <dt><code><var>context</var>.<a href=#dom-context-2d-ellipse id=dom-context-2d-ellipse-dev>ellipse</a>(<var>x</var>, <var>y</var>, <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>counterclockwise</var>])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse title="The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API adds an elliptical arc to the current sub-path.">CanvasRenderingContext2D/ellipse</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>48+</span></span><span class="safari yes"><span>Safari</span><span>9+</span></span><span class="chrome yes"><span>Chrome</span><span>31+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-ellipse id=building-paths:dom-context-2d-ellipse>ellipse</a>(<var>x</var>, <var>y</var>, <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>counterclockwise</var>])</code><dd>
    <p>Adds points to the subpath such that the arc described by the circumference of the ellipse
    described by the arguments, starting at the given start angle and ending at the given end angle,
    going in the given direction (defaulting to clockwise), is added to the path, connected to the
    previous point by a straight line.</p>

    <p>Throws an <a id=building-paths:indexsizeerror-3 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=building-paths:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the given
    radius is negative.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-rect id=dom-context-2d-rect-dev>rect</a>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect title="The CanvasRenderingContext2D.rect() method of the Canvas 2D API adds a rectangle to the current path.">CanvasRenderingContext2D/rect</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dt><code><var>path</var>.<a href=#dom-context-2d-rect id=building-paths:dom-context-2d-rect>rect</a>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</code><dd><p>Adds a new closed subpath to the path, representing the given rectangle.<dt><code><var>context</var>.<a href=#dom-context-2d-roundrect id=dom-context-2d-roundrect-dev>roundRect</a>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>, <var>radii</var>)</code><dt><code><var>path</var>.<a href=#dom-context-2d-roundrect id=building-paths:dom-context-2d-roundrect>roundRect</a>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>, <var>radii</var>)</code><dd>
    <p>Adds a new closed subpath to the path representing the given rounded rectangle.
    <var>radii</var> is either a list of radii or a single radius representing the corners of the
    rectangle in pixels. If a list is provided, the number and order of these radii function in the
    same way as the CSS <a id="building-paths:'border-radius'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-radius data-x-internal="'border-radius'">'border-radius'</a> property. A single radius behaves the same way
    as a list with a single element.</p>

    <p>If <var>w</var> and <var>h</var> are both greater than or equal to 0, or if both are smaller
    than 0, then the path is drawn clockwise. Otherwise, it is drawn counterclockwise.</p>

    <p>When <var>w</var> is negative, the rounded rectangle is flipped horizontally, which means
    that the radius values that normally apply to the left corners are used on the right and vice
    versa. Similarly, when <var>h</var> is negative, the rounded rect is flipped vertically.</p>

    <p>When a value <var>r</var> in <var>radii</var> is a number, the corresponding corner(s) are
    drawn as circular arcs of radius <var>r</var>.</p>

    <p>When a value <var>r</var> in <var>radii</var> is an object with <code>{ x, y
    }</code> properties, the corresponding corner(s) are drawn as elliptical arcs whose <var>x</var>
    and <var>y</var> radii are equal to <var>r.x</var> and <var>r.y</var>, respectively.</p>

    <p>When the sum of the <var>radii</var> of two corners of the same edge is greater than the
    length of the edge, all the <var>radii</var> of the rounded rectangle are scaled by a factor of
    length / (<var>r1</var> + <var>r2</var>). If multiple edges have this property, the scale factor
    of the edge with the smallest scale factor is used. This is consistent with CSS behavior.</p>

    <p>Throws a <code id=building-paths:js-rangeerror><a data-x-internal=js-rangeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror>RangeError</a></code> if <var>radii</var> is a list whose
    size is not one, two, three, or four.</p>

    <p>Throws a <code id=building-paths:js-rangeerror-2><a data-x-internal=js-rangeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror>RangeError</a></code> if a value in <var>radii</var> is a
    negative number, or is an <code>{ x, y }</code> object whose <code>x</code>
    or <code>y</code> properties are negative numbers.</p>

    
    
   </dl>

  

  <p>The following methods allow authors to manipulate the <a href=#concept-path id=building-paths:concept-path-5>paths</a>
  of objects implementing the <code id=building-paths:canvaspath-3><a href=#canvaspath>CanvasPath</a></code> interface.</p>

  <p>For objects implementing the <code id=building-paths:canvasdrawpath><a href=#canvasdrawpath>CanvasDrawPath</a></code> and <code id=building-paths:canvastransform><a href=#canvastransform>CanvasTransform</a></code>
  interfaces, the points passed to the methods, and the resulting lines added to <a href=#current-default-path id=building-paths:current-default-path>current
  default path</a> by these methods, must be transformed according to the <a href=#transformations id=building-paths:transformations>current transformation matrix</a> before being added to
  the path.</p>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-moveto data-dfn-type=method><code>moveTo(<var>x</var>,
  <var>y</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then return.<li><p>Create a new subpath with the specified point as its first (and only) point.</ol>

  <p>When the user agent is to <dfn id=ensure-there-is-a-subpath>ensure there is a subpath</dfn> for a coordinate (<var>x</var>,
  <var>y</var>) on a <a href=#concept-path id=building-paths:concept-path-6>path</a>, the user agent must check to see if
  the <a href=#concept-path id=building-paths:concept-path-7>path</a> has its <a href=#need-new-subpath id=building-paths:need-new-subpath-2>need new subpath</a> flag set. If it
  does, then the user agent must create a new subpath with the point (<var>x</var>, <var>y</var>) as
  its first (and only) point, as if the <code id=building-paths:dom-context-2d-moveto-2><a href=#dom-context-2d-moveto>moveTo()</a></code> method
  had been called, and must then unset the <a href=#concept-path id=building-paths:concept-path-8>path</a>'s <a href=#need-new-subpath id=building-paths:need-new-subpath-3>need new
  subpath</a> flag.</p>


  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-closepath data-dfn-type=method><code>closePath()</code></dfn> method, when invoked, must do nothing
  if the object's path has no subpaths. Otherwise, it must mark the last subpath as closed, create a
  new subpath whose first point is the same as the previous subpath's first point, and finally add
  this new subpath to the path.</p>

  <p class=note>If the last subpath had more than one point in its list of points, then this is
  equivalent to adding a straight line connecting the last point back to the first point of the last
  subpath, thus "closing" the subpath.</p>

  <hr>

  <p>New points and the lines connecting them are added to subpaths using the methods described
  below. In all cases, the methods only modify the last subpath in the object's path.</p>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-lineto data-dfn-type=method><code>lineTo(<var>x</var>,
  <var>y</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then return.<li><p>If the object's path has no subpaths, then <a href=#ensure-there-is-a-subpath id=building-paths:ensure-there-is-a-subpath>ensure there is a subpath</a> for
   <span>(<var>x</var>, <var>y</var>)</span>.<li><p>Otherwise, connect the last point in the subpath to the given point (<var>x</var>,
   <var>y</var>) using a straight line, and then add the given point (<var>x</var>, <var>y</var>) to
   the subpath.</ol>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-quadraticcurveto data-dfn-type=method><code>quadraticCurveTo(<var>cpx</var>, <var>cpy</var>,
  <var>x</var>, <var>y</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p><a href=#ensure-there-is-a-subpath id=building-paths:ensure-there-is-a-subpath-2>Ensure there is a subpath</a> for <span>(<var>cpx</var>,
   <var>cpy</var>)</span>.<li><p>Connect the last point in the subpath to the given point (<var>x</var>, <var>y</var>)
   using a quadratic Bézier curve with control point (<var>cpx</var>, <var>cpy</var>).
   <a href=references.html#refsBEZIER>[BEZIER]</a><li><p>Add the given point (<var>x</var>, <var>y</var>) to the subpath.</ol>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-beziercurveto data-dfn-type=method><code>bezierCurveTo(<var>cp1x</var>, <var>cp1y</var>,
  <var>cp2x</var>, <var>cp2y</var>, <var>x</var>, <var>y</var>)</code></dfn> method, when invoked,
  must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p><a href=#ensure-there-is-a-subpath id=building-paths:ensure-there-is-a-subpath-3>Ensure there is a subpath</a> for <span>(<var>cp1x</var>,
   <var>cp1y</var>)</span>.<li><p>Connect the last point in the subpath to the given point (<var>x</var>, <var>y</var>)
   using a cubic Bézier curve with control points (<var>cp1x</var>, <var>cp1y</var>) and
   (<var>cp2x</var>, <var>cp2y</var>). <a href=references.html#refsBEZIER>[BEZIER]</a><li><p>Add the point (<var>x</var>, <var>y</var>) to the subpath.</ol>

  <hr>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-arcto data-dfn-type=method><code>arcTo(<var>x1</var>,
  <var>y1</var>, <var>x2</var>, <var>y2</var>, <var>radius</var>)</code></dfn> method, when invoked,
  must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p><a href=#ensure-there-is-a-subpath id=building-paths:ensure-there-is-a-subpath-4>Ensure there is a subpath</a> for <span>(<var>x1</var>,
   <var>y1</var>)</span>.<li><p>If <var>radius</var> is negative, then throw an <a id=building-paths:indexsizeerror-4 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a>
   <code id=building-paths:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let the point (<var>x0</var>, <var>y0</var>) be the last point in the subpath, transformed
   by the inverse of the <a href=#transformations id=building-paths:transformations-2>current transformation
   matrix</a> (so that it is in the same coordinate system as the points passed to the
   method).<li><p>If the point (<var>x0</var>, <var>y0</var>) is equal to the point (<var>x1</var>,
   <var>y1</var>), or if the point (<var>x1</var>, <var>y1</var>) is equal to the point
   (<var>x2</var>, <var>y2</var>), or if <var>radius</var> is zero, then add the point
   (<var>x1</var>, <var>y1</var>) to the subpath, and connect that point to the previous point
   (<var>x0</var>, <var>y0</var>) by a straight line.<li><p>Otherwise, if the points (<var>x0</var>, <var>y0</var>), (<var>x1</var>, <var>y1</var>),
   and (<var>x2</var>, <var>y2</var>) all lie on a single straight line, then add the point
   (<var>x1</var>, <var>y1</var>) to the subpath, and connect that point to the previous point
   (<var>x0</var>, <var>y0</var>) by a straight line.<li><p>Otherwise, let <var>The Arc</var> be the shortest arc given by circumference of the circle
   that has radius <var>radius</var>, and that has one point tangent to the half-infinite line that
   crosses the point (<var>x0</var>, <var>y0</var>) and ends at the point (<var>x1</var>,
   <var>y1</var>), and that has a different point tangent to the half-infinite line that ends at the
   point (<var>x1</var>, <var>y1</var>) and crosses the point (<var>x2</var>, <var>y2</var>). The
   points at which this circle touches these two lines are called the start and end tangent points
   respectively. Connect the point (<var>x0</var>, <var>y0</var>) to the start tangent point by a
   straight line, adding the start tangent point to the subpath, and then connect the start tangent
   point to the end tangent point by <var>The Arc</var>, adding the end tangent point to the
   subpath.</ol>

  <hr>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-arc data-dfn-type=method><code>arc(<var>x</var>,
  <var>y</var>, <var>radius</var>, <var>startAngle</var>, <var>endAngle</var>,
  <var>counterclockwise</var>)</code></dfn> method, when invoked, must run the <a href=#ellipse-method-steps id=building-paths:ellipse-method-steps>ellipse method
  steps</a> with <a id=building-paths:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>x</var>, <var>y</var>, <var>radius</var>, <var>radius</var>, 0,
  <var>startAngle</var>, <var>endAngle</var>, and <var>counterclockwise</var>.</p>

  <p class=note>This makes it equivalent to <code id=building-paths:dom-context-2d-ellipse-2><a href=#dom-context-2d-ellipse>ellipse()</a></code>
  except that both radii are equal and <var>rotation</var> is 0.</p>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-ellipse data-dfn-type=method><code>ellipse(<var>x</var>,
  <var>y</var>, <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>,
  <var>endAngle</var>, <var>counterclockwise</var>)</code></dfn> method, when invoked, must run the
  <a href=#ellipse-method-steps id=building-paths:ellipse-method-steps-2>ellipse method steps</a> with <a id=building-paths:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>x</var>, <var>y</var>, <var>radiusX</var>,
  <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>, <var>endAngle</var>, and
  <var>counterclockwise</var>.</p>

  <p>The <dfn id=determine-the-point-on-an-ellipse-steps>determine the point on an ellipse steps</dfn>, given <var>ellipse</var>, and
  <var>angle</var>, are:</p>

  <ol><li><p>Let <var>eccentricCircle</var> be the circle that shares its origin with
   <var>ellipse</var>, with a radius equal to the semi-major axis of <var>ellipse</var>.<li><p>Let <var>outerPoint</var> be the point on <var>eccentricCircle</var>'s circumference at
   <var>angle</var> measured in radians clockwise from <var>ellipse</var>'s semi-major
   axis.<li><p>Let <var>chord</var> be the line perpendicular to <var>ellipse</var>'s major axis between
   this axis and <var>outerPoint</var>.<li><p>Return the point on <var>chord</var> that crosses <var>ellipse</var>'s
   circumference.</ol>

  <p>The <dfn id=ellipse-method-steps>ellipse method steps</dfn>, given <var>canvasPath</var>, <var>x</var>, <var>y</var>,
  <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>,
  <var>endAngle</var>, and <var>counterclockwise</var>, are:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p>If either <var>radiusX</var> or <var>radiusY</var> are negative, then throw an
   <a id=building-paths:indexsizeerror-5 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=building-paths:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>canvasPath</var>'s path has any subpaths, then add a straight line from the last
   point in the subpath to the start point of the arc.<li>
    <p>Add the start and end points of the arc to the subpath, and connect them with an arc. The
    arc and its start and end points are defined as follows:</p>

    <p>Consider an ellipse that has its origin at (<var>x</var>, <var>y</var>), that has a
    major-axis radius <var>radiusX</var> and a minor-axis radius <var>radiusY</var>, and that is
    rotated about its origin such that its semi-major axis is inclined <var>rotation</var> radians
    clockwise from the x-axis.</p>

    <p>If <var>counterclockwise</var> is false and <span><var>endAngle</var> −
    <var>startAngle</var></span> is greater than or equal to <span>2π</span>, or, if
    <var>counterclockwise</var> is <em>true</em> and <span><var>startAngle</var> −
    <var>endAngle</var></span> is greater than or equal to <span>2π</span>, then the
    arc is the whole circumference of this ellipse, and both the start point and the end point are
    the result of running the <a href=#determine-the-point-on-an-ellipse-steps id=building-paths:determine-the-point-on-an-ellipse-steps>determine the point on an ellipse steps</a> given this
    ellipse and <var>startAngle</var>.</p>

    <p>Otherwise, the start point is the result of running the <a href=#determine-the-point-on-an-ellipse-steps id=building-paths:determine-the-point-on-an-ellipse-steps-2>determine the point on an
    ellipse steps</a> given this ellipse and <var>startAngle</var>, the end point is the result
    of running the <a href=#determine-the-point-on-an-ellipse-steps id=building-paths:determine-the-point-on-an-ellipse-steps-3>determine the point on an ellipse steps</a> given this ellipse and
    <var>endAngle</var>, and the arc is the path along the circumference of this ellipse from the
    start point to the end point, going counterclockwise if <var>counterclockwise</var> is true,
    and clockwise otherwise. Since the points are on the ellipse, as opposed to being simply angles
    from zero, the arc can never cover an angle greater than <span>2π</span>
    radians.</p>

    <p class=note>Even if the arc covers the entire circumference of the ellipse and there are no
    other points in the subpath, the path is not closed unless the <code id=building-paths:dom-context-2d-closepath-2><a href=#dom-context-2d-closepath>closePath()</a></code> method is appropriately invoked.</p>
   </ol>

  <hr>

  <p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-rect data-dfn-type=method><code>rect(<var>x</var>,
  <var>y</var>, <var>w</var>, <var>h</var>)</code></dfn> method, when invoked, must run these
  steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p>Create a new subpath containing just the four points (<var>x</var>, <var>y</var>),
   (<var>x</var>+<var>w</var>, <var>y</var>), (<var>x</var>+<var>w</var>,
   <var>y</var>+<var>h</var>), (<var>x</var>, <var>y</var>+<var>h</var>), in that order, with those
   four points connected by straight lines.<li><p>Mark the subpath as closed.<li><p>Create a new subpath with the point (<var>x</var>, <var>y</var>) as the only point in the
   subpath.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect title="The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.">CanvasRenderingContext2D/roundRect</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>112+</span></span><span class="safari yes"><span>Safari</span><span>16+</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=CanvasPath id=dom-context-2d-roundrect data-dfn-type=method><code>roundRect(<var>x</var>, <var>y</var>, <var>w</var>,
  <var>h</var>, <var>radii</var>)</code></dfn> method steps are:</p>

  <ol><li><p>If any of <var>x</var>, <var>y</var>, <var>w</var>, or <var>h</var> are infinite or NaN,
   then return.<li><p>If <var>radii</var> is an <code id=building-paths:idl-unrestricted-double><a data-x-internal=idl-unrestricted-double href=https://webidl.spec.whatwg.org/#idl-unrestricted-double>unrestricted
   double</a></code> or <code id=building-paths:dompointinit><a data-x-internal=dompointinit href=https://drafts.fxtf.org/geometry/#dictdef-dompointinit>DOMPointInit</a></code>, then set <var>radii</var> to « <var>radii</var>
   ».<li><p>If <var>radii</var> is not a list of size one, two, three, or four, then throw a <code id=building-paths:js-rangeerror-3><a data-x-internal=js-rangeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror>RangeError</a></code>.<li><p>Let <var>normalizedRadii</var> be an empty list.<li>
    <p>For each <var>radius</var> of <var>radii</var>:</p>

    <ol><li>
      <p>If <var>radius</var> is a <code id=building-paths:dompointinit-2><a data-x-internal=dompointinit href=https://drafts.fxtf.org/geometry/#dictdef-dompointinit>DOMPointInit</a></code>:</p>

      <ol><li><p>If <var>radius</var>["<code id=building-paths:dompointinit-x><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"] or
       <var>radius</var>["<code id=building-paths:dompointinit-y><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"] is infinite or NaN, then
       return.<li><p>If <var>radius</var>["<code id=building-paths:dompointinit-x-2><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"] or
       <var>radius</var>["<code id=building-paths:dompointinit-y-2><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"] is negative, then throw a <code id=building-paths:js-rangeerror-4><a data-x-internal=js-rangeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror>RangeError</a></code>.<li><p>Otherwise, append <var>radius</var> to <var>normalizedRadii</var>.</ol>
     <li>
      <p>If <var>radius</var> is a <code id=building-paths:idl-unrestricted-double-2><a data-x-internal=idl-unrestricted-double href=https://webidl.spec.whatwg.org/#idl-unrestricted-double>unrestricted
      double</a></code>:</p>

      <ol><li><p>If <var>radius</var> is infinite or NaN, then return.<li><p>If <var>radius</var> is negative, then throw a <code id=building-paths:js-rangeerror-5><a data-x-internal=js-rangeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror>RangeError</a></code>.<li><p>Otherwise, append «[ "<code id=building-paths:dompointinit-x-3><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>" → <var>radius</var>,
       "<code id=building-paths:dompointinit-x-4><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>y</a></code>" → <var>radius</var> ]» to
       <var>normalizedRadii</var>.</ol>
     </ol>
   <li><p>Let <var>upperLeft</var>, <var>upperRight</var>, <var>lowerRight</var>, and
   <var>lowerLeft</var> be null.<li><p>If <var>normalizedRadii</var>'s size is 4, then set <var>upperLeft</var> to
   <var>normalizedRadii</var>[0], set <var>upperRight</var> to <var>normalizedRadii</var>[1], set
   <var>lowerRight</var> to <var>normalizedRadii</var>[2], and set <var>lowerLeft</var> to
   <var>normalizedRadii</var>[3].<li><p>If <var>normalizedRadii</var>'s size is 3, then set <var>upperLeft</var> to
   <var>normalizedRadii</var>[0], set <var>upperRight</var> and <var>lowerLeft</var> to
   <var>normalizedRadii</var>[1], and set <var>lowerRight</var> to
   <var>normalizedRadii</var>[2].<li><p>If <var>normalizedRadii</var>'s size is 2, then set <var>upperLeft</var> and
   <var>lowerRight</var> to <var>normalizedRadii</var>[0] and set <var>upperRight</var> and
   <var>lowerLeft</var> to <var>normalizedRadii</var>[1].<li><p>If <var>normalizedRadii</var>'s size is 1, then set <var>upperLeft</var>,
   <var>upperRight</var>, <var>lowerRight</var>, and <var>lowerLeft</var> to
   <var>normalizedRadii</var>[0].<li>
    <p>Corner curves must not overlap. Scale all radii to prevent this:</p>

    <ol><li><p>Let <var>top</var> be <var>upperLeft</var>["<code id=building-paths:dompointinit-x-5><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"] +
     <var>upperRight</var>["<code id=building-paths:dompointinit-x-6><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"].<li><p>Let <var>right</var> be <var>upperRight</var>["<code id=building-paths:dompointinit-y-3><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"] + <var>lowerRight</var>["<code id=building-paths:dompointinit-y-4><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"].<li><p>Let <var>bottom</var> be <var>lowerRight</var>["<code id=building-paths:dompointinit-x-7><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"] + <var>lowerLeft</var>["<code id=building-paths:dompointinit-x-8><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"].<li><p>Let <var>left</var> be <var>upperLeft</var>["<code id=building-paths:dompointinit-y-5><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"]
     + <var>lowerLeft</var>["<code id=building-paths:dompointinit-y-6><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"].<li><p>Let <var>scale</var> be the minimum value of the ratios <var>w</var> / <var>top</var>,
     <var>h</var> / <var>right</var>, <var>w</var> / <var>bottom</var>, <var>h</var> /
     <var>left</var>.<li><p>If <var>scale</var> is less than 1, then set the <code id=building-paths:dompointinit-x-9><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>
     and <code id=building-paths:dompointinit-y-7><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code> members of <var>upperLeft</var>,
     <var>upperRight</var>, <var>lowerLeft</var>, and <var>lowerRight</var> to their current values
     multiplied by <var>scale</var>.</ol>
   <li>
    <p>Create a new subpath:</p>

    <ol><li><p>Move to the point (<var>x</var> + <var>upperLeft</var>["<code id=building-paths:dompointinit-x-10><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"], <var>y</var>).<li><p>Draw a straight line to the point (<var>x</var> + <var>w</var> −
     <var>upperRight</var>["<code id=building-paths:dompointinit-x-11><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"], <var>y</var>).<li><p>Draw an arc to the point (<var>x</var> + <var>w</var>, <var>y</var> +
     <var>upperRight</var>["<code id=building-paths:dompointinit-y-8><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"]).<li><p>Draw a straight line to the point (<var>x</var> + <var>w</var>, <var>y</var> +
     <var>h</var> − <var>lowerRight</var>["<code id=building-paths:dompointinit-y-9><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"]).<li><p>Draw an arc to the point (<var>x</var> + <var>w</var> −
     <var>lowerRight</var>["<code id=building-paths:dompointinit-x-12><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"], <var>y</var> +
     <var>h</var>).<li><p>Draw a straight line to the point (<var>x</var> + <var>lowerLeft</var>["<code id=building-paths:dompointinit-x-13><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"], <var>y</var> + <var>h</var>).<li><p>Draw an arc to the point (<var>x</var>, <var>y</var> + <var>h</var> −
     <var>lowerLeft</var>["<code id=building-paths:dompointinit-y-10><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"]).<li><p>Draw a straight line to the point (<var>x</var>, <var>y</var> +
     <var>upperLeft</var>["<code id=building-paths:dompointinit-y-11><a data-x-internal=dompointinit-y href=https://drafts.fxtf.org/geometry/#dom-dompointinit-y>y</a></code>"]).<li><p>Draw an arc to the point (<var>x</var> + <var>upperLeft</var>["<code id=building-paths:dompointinit-x-14><a data-x-internal=dompointinit-x href=https://drafts.fxtf.org/geometry/#dom-dompointinit-x>x</a></code>"], <var>y</var>).</ol>
   <li><p>Mark the subpath as closed.<li><p>Create a new subpath with the point (<var>x</var>, <var>y</var>) as the only point in the
   subpath.</ol>

  <p class=note>This is designed to behave similarly to the CSS <a href=https://drafts.csswg.org/css-backgrounds/#propdef-border-radius id="building-paths:'border-radius'-2" data-x-internal="'border-radius'">'border-radius'</a> property.</p>

  

  



  <h6 id=path2d-objects><span class=secno>4.12.5.1.7</span> <code id=path2d-objects:path2d><a href=#path2d>Path2D</a></code> objects<a href=#path2d-objects class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Path2D title="The Path2D interface of the Canvas 2D API is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.">Path2D</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>36+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p><code id=path2d-objects:path2d-2><a href=#path2d>Path2D</a></code> objects can be used to declare paths that are then later used on
  objects implementing the <code id=path2d-objects:canvasdrawpath><a href=#canvasdrawpath>CanvasDrawPath</a></code> interface. In addition to many of the APIs
  described in earlier sections, <code id=path2d-objects:path2d-3><a href=#path2d>Path2D</a></code> objects have methods to combine paths, and to
  add text to paths.</p>

  <dl class=domintro><dt><code><var>path</var> = new <a href=#dom-path2d id=dom-path2d-dev>Path2D</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D title="The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of SVG path data.">Path2D/Path2D</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>36+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Creates a new empty <code id=path2d-objects:path2d-4><a href=#path2d>Path2D</a></code> object.<dt><code><var>path</var> = new <a href=#dom-path2d id=path2d-objects:dom-path2d>Path2D</a>(<var>path</var>)</code><dd>
    <p>When <var>path</var> is a <code id=path2d-objects:path2d-5><a href=#path2d>Path2D</a></code> object, returns a copy.</p>

    <p>When <var>path</var> is a string, creates the path described by the argument, interpreted as
    SVG path data. <a href=references.html#refsSVG>[SVG]</a>
   <dt><code><var>path</var>.<a href=#dom-path2d-addpath id=dom-path2d-addpath-dev>addPath</a>(<var>path</var> [, <var>transform</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath title="The Path2D.addPath() method of the Canvas 2D API adds one Path2D object to another Path2D object.">Path2D/addPath</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>34+</span></span><span class="safari yes"><span>Safari</span><span>9+</span></span><span class="chrome yes"><span>Chrome</span><span>68+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Adds to the path the path given by the argument.</dl>

  

  <p>The <dfn data-dfn-for=Path2D id=dom-path2d data-dfn-type=constructor><code>Path2D(<var>path</var>)</code></dfn> constructor, when invoked, must run these
  steps:</p>

  <ol><li><p>Let <var>output</var> be a new <code id=path2d-objects:path2d-6><a href=#path2d>Path2D</a></code> object.<li><p>If <var>path</var> is not given, then return <var>output</var>.<li><p>If <var>path</var> is a <code id=path2d-objects:path2d-7><a href=#path2d>Path2D</a></code> object, then add all subpaths of
   <var>path</var> to <var>output</var> and return <var>output</var>. (In other words, it returns a
   copy of the argument.)<li>
    <p>Let <var>svgPath</var> be the result of parsing and interpreting <var>path</var> according to
    <cite>SVG 2</cite>'s rules for path data. <a href=references.html#refsSVG>[SVG]</a></p>

    <p class=note>The resulting path could be empty. SVG defines error handling rules for parsing
    and applying path data.</p>
   <li><p>Let (<var>x</var>, <var>y</var>) be the last point in <var>svgPath</var>.<li><p>Add all the subpaths, if any, from <var>svgPath</var> to <var>output</var>.<li><p>Create a new subpath in <var>output</var> with (<var>x</var>, <var>y</var>) as the only
   point in the subpath.<li><p>Return <var>output</var>.</ol>

  <hr>

  <p>The <dfn data-dfn-for=Path2D id=dom-path2d-addpath data-dfn-type=method><code>addPath(<var>path</var>,
  <var>transform</var>)</code></dfn> method, when invoked on a <code id=path2d-objects:path2d-8><a href=#path2d>Path2D</a></code> object
  <var>a</var>, must run these steps:</p>

  <ol><li><p>If the <code id=path2d-objects:path2d-9><a href=#path2d>Path2D</a></code> object <var>path</var> has no subpaths, then return.<li><p>Let <var>matrix</var> be the result of <a href=https://drafts.fxtf.org/geometry/#create-a-dommatrix-from-the-2d-dictionary id=path2d-objects:create-a-dommatrix-from-a-2d-dictionary data-x-internal=create-a-dommatrix-from-a-2d-dictionary>creating a <code>DOMMatrix</code> from the 2D dictionary</a>
   <var>transform</var>.<li><p>If one or more of <var>matrix</var>'s <a id=path2d-objects:m11-element href=https://drafts.fxtf.org/geometry/#matrix-m11-element data-x-internal=m11-element>m11 element</a>, <a id=path2d-objects:m12-element href=https://drafts.fxtf.org/geometry/#matrix-m12-element data-x-internal=m12-element>m12 element</a>,
   <a id=path2d-objects:m21-element href=https://drafts.fxtf.org/geometry/#matrix-m21-element data-x-internal=m21-element>m21 element</a>, <a id=path2d-objects:m22-element href=https://drafts.fxtf.org/geometry/#matrix-m22-element data-x-internal=m22-element>m22 element</a>, <a id=path2d-objects:m41-element href=https://drafts.fxtf.org/geometry/#matrix-m41-element data-x-internal=m41-element>m41 element</a>, or <a id=path2d-objects:m42-element href=https://drafts.fxtf.org/geometry/#matrix-m42-element data-x-internal=m42-element>m42
   element</a> are infinite or NaN, then return.<li><p>Create a copy of all the subpaths in <var>path</var>. Let <var>c</var> be this
   copy.<li><p>Transform all the coordinates and lines in <var>c</var> by the transform matrix
   <var>matrix</var>.<li><p>Let (<var>x</var>, <var>y</var>) be the last point in the last subpath
   of <var>c</var>.<li><p>Add all the subpaths in <var>c</var> to <var>a</var>.<li><p>Create a new subpath in <var>a</var> with (<var>x</var>, <var>y</var>) as the only point
   in the subpath.</ol>

  


  <h6 id=transformations><span class=secno>4.12.5.1.8</span> <dfn>Transformations</dfn><a href=#transformations class=self-link></a></h6>

  <p>Objects that implement the <code id=transformations:canvastransform><a href=#canvastransform>CanvasTransform</a></code> interface have a <dfn id=current-transformation-matrix>current
  transformation matrix</dfn>, as well as methods (described in this section) to manipulate it. When
  an object implementing the <code id=transformations:canvastransform-2><a href=#canvastransform>CanvasTransform</a></code> interface is created, its transformation
  matrix must be initialized to the identity matrix.</p>

  <p>The <a href=#current-transformation-matrix id=transformations:current-transformation-matrix>current transformation matrix</a> is applied to coordinates when creating the
  <a href=#current-default-path id=transformations:current-default-path>current default path</a>, and when painting text, shapes, and <code id=transformations:path2d><a href=#path2d>Path2D</a></code>
  objects, on objects implementing the <code id=transformations:canvastransform-3><a href=#canvastransform>CanvasTransform</a></code> interface.</p>
  

  

  <p>The transformations must be performed in reverse order.</p>

  <p class=note>For instance, if a scale transformation that doubles the width is applied to the
  canvas, followed by a rotation transformation that rotates drawing operations by a quarter turn,
  and a rectangle twice as wide as it is tall is then drawn on the canvas, the actual result will be
  a square.</p> 

  

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-scale id=dom-context-2d-scale-dev>scale</a>(<var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale title="The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas units horizontally and/or vertically.">CanvasRenderingContext2D/scale</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Changes the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-2>current transformation matrix</a> to apply a scaling transformation with
    the given characteristics.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-rotate id=dom-context-2d-rotate-dev>rotate</a>(<var>angle</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate title="The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the transformation matrix.">CanvasRenderingContext2D/rotate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Changes the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-3>current transformation matrix</a> to apply a rotation transformation
    with the given characteristics. The angle is in radians.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-translate id=dom-context-2d-translate-dev>translate</a>(<var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate title="The CanvasRenderingContext2D.translate() method of the Canvas 2D API adds a translation transformation to the current matrix.">CanvasRenderingContext2D/translate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Changes the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-4>current transformation matrix</a> to apply a translation transformation
    with the given characteristics.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-transform id=dom-context-2d-transform-dev>transform</a>(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>e</var>, <var>f</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform title="The CanvasRenderingContext2D.transform() method of the Canvas 2D API multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.">CanvasRenderingContext2D/transform</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Changes the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-5>current transformation matrix</a> to apply the matrix given by the
    arguments as described below.</p>
   <dt><code><var>matrix</var> = <var>context</var>.<a href=#dom-context-2d-gettransform id=dom-context-2d-gettransform-dev>getTransform</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform title="The CanvasRenderingContext2D.getTransform() method of the Canvas 2D API retrieves the current transformation matrix being applied to the context.">CanvasRenderingContext2D/getTransform</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>70+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>68+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns a copy of the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-6>current transformation matrix</a>, as a newly created
    <code id=transformations:dommatrix><a data-x-internal=dommatrix href=https://drafts.fxtf.org/geometry/#dommatrix>DOMMatrix</a></code> object.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-settransform id=dom-context-2d-settransform-dev>setTransform</a>(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>e</var>, <var>f</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform title="The CanvasRenderingContext2D.setTransform() method of the Canvas 2D API resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.">CanvasRenderingContext2D/setTransform</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Changes the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-7>current transformation matrix</a> <em>to</em> the matrix given by the
    arguments as described below.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-settransform-matrix id=dom-context-2d-settransform-matrix-dev>setTransform</a>(<var>transform</var>)</code><dd>
    <p>Changes the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-8>current transformation matrix</a> <em>to</em> the matrix represented by
    the passed <code id=transformations:dommatrix2dinit><a data-x-internal=dommatrix2dinit href=https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit>DOMMatrix2DInit</a></code> dictionary.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-resettransform id=dom-context-2d-resettransform-dev>resetTransform</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform title="The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current transform to the identity matrix.">CanvasRenderingContext2D/resetTransform</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>36+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>31+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Changes the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-9>current transformation matrix</a> to the identity matrix.</dl>

  

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-scale data-dfn-type=method><code>scale(<var>x</var>,
  <var>y</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then return.<li><p>Add the scaling transformation described by the arguments to the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-10>current
   transformation matrix</a>. The <var>x</var> argument represents the scale factor in the
   horizontal direction and the <var>y</var> argument represents the scale factor in the vertical
   direction. The factors are multiples.</ol>

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-rotate data-dfn-type=method><code>rotate(<var>angle</var>)</code></dfn> method, when invoked, must
  run these steps:</p>

  <ol><li><p>If <var>angle</var> is infinite or NaN, then return.<li><p>Add the rotation transformation described by the argument to the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-11>current
   transformation matrix</a>. The <var>angle</var> argument represents a clockwise rotation angle
   expressed in radians.</ol>

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-translate data-dfn-type=method><code>translate(<var>x</var>, <var>y</var>)</code></dfn> method, when
  invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then return.<li><p>Add the translation transformation described by the arguments to the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-12>current
   transformation matrix</a>. The <var>x</var> argument represents the translation distance in
   the horizontal direction and the <var>y</var> argument represents the translation distance in the
   vertical direction. The arguments are in coordinate space units.</ol>

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-transform data-dfn-type=method><code>transform(<var>a</var>, <var>b</var>, <var>c</var>,
  <var>d</var>, <var>e</var>, <var>f</var>)</code></dfn> method, when invoked, must run these
  steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li>
    <p>Replace the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-13>current transformation matrix</a> with the result of <a href=https://drafts.fxtf.org/geometry/#matrix-multiply id=transformations:matrix-multiplication data-x-internal=matrix-multiplication>multiplying</a> the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-14>current transformation matrix</a>
    with the matrix described by:</p>

    <table class=matrix><tr><td><var>a</var><td><var>c</var><td><var>e</var><tr><td><var>b</var><td><var>d</var><td><var>f</var><tr><td>0<td>0<td>1</table>
   </ol>

  

  <p class=note>The arguments <var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>,
  <var>e</var>, and <var>f</var> are sometimes called <var>m11</var>, <var>m12</var>,
  <var>m21</var>, <var>m22</var>, <var>dx</var>, and <var>dy</var> or <var>m11</var>,
  <var>m21</var>, <var>m12</var>, <var>m22</var>, <var>dx</var>, and <var>dy</var>. Care ought to be
  taken in particular with the order of the second and third arguments (<var>b</var> and
  <var>c</var>) as their order varies from API to API and APIs sometimes use the notation
  <var>m12</var>/<var>m21</var> and sometimes <var>m21</var>/<var>m12</var> for those positions.</p>

  

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-gettransform data-dfn-type=method><code>getTransform()</code></dfn> method, when invoked, must return
  a newly created <code id=transformations:dommatrix-2><a data-x-internal=dommatrix href=https://drafts.fxtf.org/geometry/#dommatrix>DOMMatrix</a></code> representing a copy of the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-15>current transformation
  matrix</a> matrix of the context.</p>

  <p class=note>This returned object is not live, so updating it will not affect the
  <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-16>current transformation matrix</a>, and updating the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-17>current transformation
  matrix</a> will not affect an already returned <code id=transformations:dommatrix-3><a data-x-internal=dommatrix href=https://drafts.fxtf.org/geometry/#dommatrix>DOMMatrix</a></code>.</p>

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-settransform data-dfn-type=method><code>setTransform(<var>a</var>, <var>b</var>, <var>c</var>,
  <var>d</var>, <var>e</var>, <var>f</var>)</code></dfn> method, when invoked, must run these
  steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li>
    <p>Reset the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-18>current transformation matrix</a> to the matrix described by:</p>

    <table class=matrix><tr><td><var>a</var><td><var>c</var><td><var>e</var><tr><td><var>b</var><td><var>d</var><td><var>f</var><tr><td>0<td>0<td>1</table>
   </ol>

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-settransform-matrix data-dfn-type=method><code>setTransform(<var>transform</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>Let <var>matrix</var> be the result of <a href=https://drafts.fxtf.org/geometry/#create-a-dommatrix-from-the-2d-dictionary id=transformations:create-a-dommatrix-from-a-2d-dictionary data-x-internal=create-a-dommatrix-from-a-2d-dictionary>creating a <code>DOMMatrix</code> from the 2D dictionary</a>
   <var>transform</var>.</p>

   <li><p>If one or more of <var>matrix</var>'s <a id=transformations:m11-element href=https://drafts.fxtf.org/geometry/#matrix-m11-element data-x-internal=m11-element>m11 element</a>, <a id=transformations:m12-element href=https://drafts.fxtf.org/geometry/#matrix-m12-element data-x-internal=m12-element>m12 element</a>,
   <a id=transformations:m21-element href=https://drafts.fxtf.org/geometry/#matrix-m21-element data-x-internal=m21-element>m21 element</a>, <a id=transformations:m22-element href=https://drafts.fxtf.org/geometry/#matrix-m22-element data-x-internal=m22-element>m22 element</a>, <a id=transformations:m41-element href=https://drafts.fxtf.org/geometry/#matrix-m41-element data-x-internal=m41-element>m41 element</a>, or <a id=transformations:m42-element href=https://drafts.fxtf.org/geometry/#matrix-m42-element data-x-internal=m42-element>m42
   element</a> are infinite or NaN, then return.<li><p>Reset the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-19>current transformation matrix</a> to <var>matrix</var>.</ol>

  <p>The <dfn data-dfn-for=CanvasTransform id=dom-context-2d-resettransform data-dfn-type=method><code>resetTransform()</code></dfn> method, when invoked, must
  reset the <a href=#current-transformation-matrix id=transformations:current-transformation-matrix-20>current transformation matrix</a> to the identity matrix.</p>

  

  <div class=note>
   <p>Given a matrix of the form created by the <code id=transformations:dom-context-2d-transform><a href=#dom-context-2d-transform>transform()</a></code> and <code id=transformations:dom-context-2d-settransform><a href=#dom-context-2d-settransform>setTransform()</a></code> methods, i.e.,</p>

   <table class=matrix><tr><td><var>a</var><td><var>c</var><td><var>e</var><tr><td><var>b</var><td><var>d</var><td><var>f</var><tr><td>0<td>0<td>1</table>

   <p>the resulting transformed coordinates after transform matrix multiplication will be</p>

   <p class=equations>
    <var>x</var><sub>new</sub> = <var>a</var> <var>x</var> + <var>c</var> <var>y</var> + <var>e</var><br>
    <var>y</var><sub>new</sub> = <var>b</var> <var>x</var> + <var>d</var> <var>y</var> + <var>f</var>
   </p>
  </div>



  <h6 id=image-sources-for-2d-rendering-contexts><span class=secno>4.12.5.1.9</span> Image sources for 2D rendering contexts<a href=#image-sources-for-2d-rendering-contexts class=self-link></a></h6>

  <p>Some methods on the <code id=image-sources-for-2d-rendering-contexts:canvasdrawimage><a href=#canvasdrawimage>CanvasDrawImage</a></code> and <code id=image-sources-for-2d-rendering-contexts:canvasfillstrokestyles><a href=#canvasfillstrokestyles>CanvasFillStrokeStyles</a></code>
  interfaces take the union type <code id=image-sources-for-2d-rendering-contexts:canvasimagesource><a href=#canvasimagesource>CanvasImageSource</a></code> as an argument.</p>

  <p>This union type allows objects implementing any of the following interfaces to be used as image
  sources:</p>

  <ul><li><code id=image-sources-for-2d-rendering-contexts:htmlorsvgimageelement><a href=#htmlorsvgimageelement>HTMLOrSVGImageElement</a></code> (<code id=image-sources-for-2d-rendering-contexts:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> or <a id=image-sources-for-2d-rendering-contexts:svg-image href=https://svgwg.org/svg2-draft/embedded.html#ImageElement data-x-internal=svg-image>SVG <code>image</code></a>
   elements)<li><code id=image-sources-for-2d-rendering-contexts:htmlvideoelement><a href=media.html#htmlvideoelement>HTMLVideoElement</a></code> (<code id=image-sources-for-2d-rendering-contexts:the-video-element><a href=media.html#the-video-element>video</a></code> elements)<li><code id=image-sources-for-2d-rendering-contexts:htmlcanvaselement><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> (<code id=image-sources-for-2d-rendering-contexts:the-canvas-element><a href=#the-canvas-element>canvas</a></code> elements)<li><code id=image-sources-for-2d-rendering-contexts:offscreencanvas><a href=#offscreencanvas>OffscreenCanvas</a></code><li><code id=image-sources-for-2d-rendering-contexts:imagebitmap><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code><li><code id=image-sources-for-2d-rendering-contexts:videoframe><a data-x-internal=videoframe href=https://w3c.github.io/webcodecs/#videoframe-interface>VideoFrame</a></code></ul>

  <p class=note>Although not formally specified as such, <a id=image-sources-for-2d-rendering-contexts:svg-image-2 href=https://svgwg.org/svg2-draft/embedded.html#ImageElement data-x-internal=svg-image>SVG <code>image</code></a>
  elements are expected to be implemented nearly identical to <code id=image-sources-for-2d-rendering-contexts:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> elements. That is,
  <a id=image-sources-for-2d-rendering-contexts:svg-image-3 href=https://svgwg.org/svg2-draft/embedded.html#ImageElement data-x-internal=svg-image>SVG <code>image</code></a> elements share the fundamental concepts and features of
  <code id=image-sources-for-2d-rendering-contexts:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code> elements.</p>

  <p class=note>The <code id=image-sources-for-2d-rendering-contexts:imagebitmap-2><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> interface can be created from a number of other
  image-representing types, including <code id=image-sources-for-2d-rendering-contexts:imagedata><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code>.</p>

  <p>To <dfn id=check-the-usability-of-the-image-argument>check the usability of the <var>image</var> argument</dfn>, where <var>image</var>
  is a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-2><a href=#canvasimagesource>CanvasImageSource</a></code> object, run these steps:</p>

  <ol><li>
    <p>Switch on <var>image</var>:</p>

    <dl class=switch><dt><code id=image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-2><a href=#htmlorsvgimageelement>HTMLOrSVGImageElement</a></code><dd>
      <p>If <var>image</var>'s <a id=image-sources-for-2d-rendering-contexts:current-request href=images.html#current-request>current request</a>'s <a href=images.html#img-req-state id=image-sources-for-2d-rendering-contexts:img-req-state>state</a> is <a href=images.html#img-error id=image-sources-for-2d-rendering-contexts:img-error>broken</a>, then
      throw an <a id=image-sources-for-2d-rendering-contexts:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=image-sources-for-2d-rendering-contexts:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

      <p>If <var>image</var> is not <a href=images.html#img-good id=image-sources-for-2d-rendering-contexts:img-good>fully decodable</a>,
      then return <i>bad</i>.</p>

      <p>If <var>image</var> has a <a id=image-sources-for-2d-rendering-contexts:natural-width href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> or <a id=image-sources-for-2d-rendering-contexts:natural-height href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a>
      (or both) equal to zero, then return <i>bad</i>.</p> 
     <dt><code id=image-sources-for-2d-rendering-contexts:htmlvideoelement-2><a href=media.html#htmlvideoelement>HTMLVideoElement</a></code><dd><p>If <var>image</var>'s <code id=image-sources-for-2d-rendering-contexts:dom-media-readystate><a href=media.html#dom-media-readystate>readyState</a></code>
     attribute is either <code id=image-sources-for-2d-rendering-contexts:dom-media-have_nothing><a href=media.html#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code id=image-sources-for-2d-rendering-contexts:dom-media-have_metadata><a href=media.html#dom-media-have_metadata>HAVE_METADATA</a></code>, then return <i>bad</i>.<dt><code id=image-sources-for-2d-rendering-contexts:htmlcanvaselement-2><a href=#htmlcanvaselement>HTMLCanvasElement</a></code><dt><code id=image-sources-for-2d-rendering-contexts:offscreencanvas-2><a href=#offscreencanvas>OffscreenCanvas</a></code><dd><p>If <var>image</var> has either a horizontal dimension or a vertical dimension
     equal to zero, then throw an <a id=image-sources-for-2d-rendering-contexts:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
     <code id=image-sources-for-2d-rendering-contexts:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<dt><code id=image-sources-for-2d-rendering-contexts:imagebitmap-3><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code><dt><code id=image-sources-for-2d-rendering-contexts:videoframe-2><a data-x-internal=videoframe href=https://w3c.github.io/webcodecs/#videoframe-interface>VideoFrame</a></code><dd><p>If <var>image</var>'s <a id=image-sources-for-2d-rendering-contexts:detached href=structured-data.html#detached>[[Detached]]</a> internal slot value
     is set to true, then throw an <a id=image-sources-for-2d-rendering-contexts:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
     <code id=image-sources-for-2d-rendering-contexts:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</dl>
   <li>
    <p>Return <i>good</i>.</p>
   </ol>

  <p>When a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-3><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code id=image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-3><a href=#htmlorsvgimageelement>HTMLOrSVGImageElement</a></code>,
  the element's image must be used as the source image.</p>

  <p>Specifically, when a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-4><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an animated image in an
  <code id=image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-4><a href=#htmlorsvgimageelement>HTMLOrSVGImageElement</a></code>, the user agent must use the default image of the animation
  (the one that the format defines is to be used when animation is not supported or is disabled),
  or, if there is no such image, the first frame of the animation, when rendering the image for
  <code id=image-sources-for-2d-rendering-contexts:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> APIs.</p>

  <p>When a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-5><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code id=image-sources-for-2d-rendering-contexts:htmlvideoelement-3><a href=media.html#htmlvideoelement>HTMLVideoElement</a></code>, then
  the frame at the <a id=image-sources-for-2d-rendering-contexts:current-playback-position href=media.html#current-playback-position>current playback position</a> when the method with the argument is
  invoked must be used as the source image when rendering the image for
  <code id=image-sources-for-2d-rendering-contexts:canvasrenderingcontext2d-2><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> APIs, and the source image's dimensions must be the <a href=media.html#concept-video-intrinsic-width id=image-sources-for-2d-rendering-contexts:concept-video-intrinsic-width>natural width</a> and <a href=media.html#concept-video-intrinsic-height id=image-sources-for-2d-rendering-contexts:concept-video-intrinsic-height>natural height</a> of the <a id=image-sources-for-2d-rendering-contexts:media-resource href=media.html#media-resource>media resource</a>
  (i.e., after any aspect-ratio correction has been applied).</p>

  <p>When a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-6><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code id=image-sources-for-2d-rendering-contexts:htmlcanvaselement-3><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, the
  element's bitmap must be used as the source image.</p>

  <p>When a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-7><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an element that is <a id=image-sources-for-2d-rendering-contexts:being-rendered href=rendering.html#being-rendered>being
  rendered</a> and that element has been resized, the original image data of the source image
  must be used, not the image as it is rendered (e.g. <code id=image-sources-for-2d-rendering-contexts:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> and
  <code id=image-sources-for-2d-rendering-contexts:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes on the source element have no effect on how
  the object is interpreted when rendering the image for <code id=image-sources-for-2d-rendering-contexts:canvasrenderingcontext2d-3><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
  APIs).</p>

  <p>When a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-8><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code id=image-sources-for-2d-rendering-contexts:imagebitmap-4><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code>, the
  object's bitmap image data must be used as the source image.</p>

  <p>When a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-9><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code id=image-sources-for-2d-rendering-contexts:offscreencanvas-3><a href=#offscreencanvas>OffscreenCanvas</a></code>, the
  object's bitmap must be used as the source image.</p>

  <p>When a <code id=image-sources-for-2d-rendering-contexts:canvasimagesource-10><a href=#canvasimagesource>CanvasImageSource</a></code> object represents a <code id=image-sources-for-2d-rendering-contexts:videoframe-3><a data-x-internal=videoframe href=https://w3c.github.io/webcodecs/#videoframe-interface>VideoFrame</a></code>, the object's
  pixel data must be used as the source image, and the source image's dimensions must be the
  object's <a id=image-sources-for-2d-rendering-contexts:display-width href=https://w3c.github.io/webcodecs/#dom-videoframe-display-width-slot data-x-internal=display-width>[[display width]]</a> and <a id=image-sources-for-2d-rendering-contexts:display-height href=https://w3c.github.io/webcodecs/#dom-videoframe-display-height-slot data-x-internal=display-height>[[display height]]</a>.</p>

  <p>An object <var>image</var> <dfn id=the-image-argument-is-not-origin-clean>is not
  origin-clean</dfn> if, switching on <var>image</var>'s type:</p>

  <dl class=switch><dt><code id=image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-5><a href=#htmlorsvgimageelement>HTMLOrSVGImageElement</a></code>
   <dd><p><var>image</var>'s <a id=image-sources-for-2d-rendering-contexts:current-request-2 href=images.html#current-request>current request</a>'s <a href=images.html#img-req-data id=image-sources-for-2d-rendering-contexts:img-req-data>image
   data</a> is <a id=image-sources-for-2d-rendering-contexts:cors-cross-origin href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>.<dt><code id=image-sources-for-2d-rendering-contexts:htmlvideoelement-4><a href=media.html#htmlvideoelement>HTMLVideoElement</a></code>
   <dd><p><var>image</var>'s <a id=image-sources-for-2d-rendering-contexts:media-data href=media.html#media-data>media data</a> is <a id=image-sources-for-2d-rendering-contexts:cors-cross-origin-2 href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>.<dt><code id=image-sources-for-2d-rendering-contexts:htmlcanvaselement-4><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>
   <dt><code id=image-sources-for-2d-rendering-contexts:imagebitmap-5><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code>
   <dt><code id=image-sources-for-2d-rendering-contexts:offscreencanvas-4><a href=#offscreencanvas>OffscreenCanvas</a></code>
   <dd><p><var>image</var>'s bitmap's <a href=#concept-canvas-origin-clean id=image-sources-for-2d-rendering-contexts:concept-canvas-origin-clean>origin-clean</a>
   flag is false.</dl>



  <h6 id=fill-and-stroke-styles><span class=secno>4.12.5.1.10</span> Fill and stroke styles<a href=#fill-and-stroke-styles class=self-link></a></h6>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-fillstyle id=dom-context-2d-fillstyle-dev>fillStyle</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle title="The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use inside shapes. The default style is #000 (black).">CanvasRenderingContext2D/fillStyle</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current style used for filling shapes.</p>

    <p>Can be set, to change the <a href=#concept-canvasfillstrokestyles-fill-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-fill-style>fill
    style</a>.</p>

    <p>The style can be either a string containing a CSS color, or a <code id=fill-and-stroke-styles:canvasgradient><a href=#canvasgradient>CanvasGradient</a></code> or
    <code id=fill-and-stroke-styles:canvaspattern><a href=#canvaspattern>CanvasPattern</a></code> object. Invalid values are ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-strokestyle id=dom-context-2d-strokestyle-dev>strokeStyle</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle title="The CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is #000 (black).">CanvasRenderingContext2D/strokeStyle</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current style used for stroking shapes.</p>

    <p>Can be set, to change the <a href=#concept-canvasfillstrokestyles-stroke-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-stroke-style>stroke
    style.</a></p>

    <p>The style can be either a string containing a CSS color, or a <code id=fill-and-stroke-styles:canvasgradient-2><a href=#canvasgradient>CanvasGradient</a></code> or
    <code id=fill-and-stroke-styles:canvaspattern-2><a href=#canvaspattern>CanvasPattern</a></code> object. Invalid values are ignored.</p>
   </dl>

  

  

  <p>Objects that implement the <code id=fill-and-stroke-styles:canvasfillstrokestyles><a href=#canvasfillstrokestyles>CanvasFillStrokeStyles</a></code> interface have attributes and
  methods (defined in this section) that control how shapes are treated by the object.</p>

  <p>Such objects have associated <dfn id=concept-canvasfillstrokestyles-fill-style>fill
  style</dfn> and <dfn id=concept-canvasfillstrokestyles-stroke-style>stroke style</dfn>
  values, which are either CSS colors, <code id=fill-and-stroke-styles:canvaspattern-3><a href=#canvaspattern>CanvasPattern</a></code>s, or <code id=fill-and-stroke-styles:canvasgradient-3><a href=#canvasgradient>CanvasGradient</a></code>s.
  Initially, both must be the result of <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id=fill-and-stroke-styles:parsed-as-a-css-color-value data-x-internal=parsed-as-a-css-color-value>parsing</a>
  the string "<code>#000000</code>".</p>

  <p>When the value is a CSS color, it must not be affected by the transformation matrix when used
  to draw on bitmaps.</p> 

  <p class=note>When set to a <code id=fill-and-stroke-styles:canvaspattern-4><a href=#canvaspattern>CanvasPattern</a></code> or <code id=fill-and-stroke-styles:canvasgradient-4><a href=#canvasgradient>CanvasGradient</a></code> object,
  changes made to the object after the assignment do affect subsequent stroking or filling of
  shapes.</p>

  <p>The <dfn data-dfn-for=CanvasFillStrokeStyles id=dom-context-2d-fillstyle data-dfn-type=attribute><code>fillStyle</code></dfn> getter steps are:</p>

  <ol><li><p>If <a id=fill-and-stroke-styles:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-fill-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-fill-style-2>fill
   style</a> is a CSS color, then return the <a href=https://drafts.csswg.org/css-color/#serializing-color-values id=fill-and-stroke-styles:serialisation-of-a-color data-x-internal=serialisation-of-a-color>serialization</a> of that color with <a href=https://drafts.csswg.org/css-color/#color-serialization-html-compatible-serialization-is-requested id=fill-and-stroke-styles:html-compatible-serialization-is-requested data-x-internal=html-compatible-serialization-is-requested>HTML-compatible serialization requested</a>.<li><p>Return <a id=fill-and-stroke-styles:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-fill-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-fill-style-3>fill
   style</a>.</ol>

  <p>The <code id=fill-and-stroke-styles:dom-context-2d-fillstyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> setter steps are:</p>

  <ol><li>
    <p>If the given value is a string, then:</p>

    <ol><li><p>Let <var>context</var> be <a id=fill-and-stroke-styles:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=fill-and-stroke-styles:dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute's value, if that is an element;
     otherwise null.<li><p>Let <var>parsedValue</var> be the result of <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id=fill-and-stroke-styles:parsed-as-a-css-color-value-2 data-x-internal=parsed-as-a-css-color-value>parsing</a> the given value with <var>context</var> if non-null.<li><p>If <var>parsedValue</var> is failure, then return.<li><p>Set <a id=fill-and-stroke-styles:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-fill-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-fill-style-4>fill
     style</a> to <var>parsedValue</var>.<li><p>Return.</ol>
   <li><p>If the given value is a <code id=fill-and-stroke-styles:canvaspattern-5><a href=#canvaspattern>CanvasPattern</a></code> object that is marked as <a href=#concept-canvas-pattern-not-origin-clean id=fill-and-stroke-styles:concept-canvas-pattern-not-origin-clean>not origin-clean</a>, then set
   <a id=fill-and-stroke-styles:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-origin-clean id=fill-and-stroke-styles:concept-canvas-origin-clean>origin-clean</a> flag to
   false.<li><p>Set <a id=fill-and-stroke-styles:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-fill-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-fill-style-5>fill
   style</a> to the given value.</ol>

  <p>The <dfn data-dfn-for=CanvasFillStrokeStyles id=dom-context-2d-strokestyle data-dfn-type=attribute><code>strokeStyle</code></dfn> getter steps are:</p>

  <ol><li><p>If <a id=fill-and-stroke-styles:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-stroke-style-2>stroke
   style</a> is a CSS color, then return the <a href=https://drafts.csswg.org/css-color/#serializing-color-values id=fill-and-stroke-styles:serialisation-of-a-color-2 data-x-internal=serialisation-of-a-color>serialization</a> of that color with <a href=https://drafts.csswg.org/css-color/#color-serialization-html-compatible-serialization-is-requested id=fill-and-stroke-styles:html-compatible-serialization-is-requested-2 data-x-internal=html-compatible-serialization-is-requested>HTML-compatible serialization requested</a>.<li><p>Return <a id=fill-and-stroke-styles:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-stroke-style-3>stroke
   style</a>.</ol>

  <p>The <code id=fill-and-stroke-styles:dom-context-2d-strokestyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> setter steps are:</p>

  <ol><li>
    <p>If the given value is a string, then:</p>

    <ol><li><p>Let <var>context</var> be <a id=fill-and-stroke-styles:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=fill-and-stroke-styles:dom-context-2d-canvas-2><a href=#dom-context-2d-canvas>canvas</a></code> attribute's value, if that is an element;
     otherwise null.<li><p>Let <var>parsedValue</var> be the result of <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id=fill-and-stroke-styles:parsed-as-a-css-color-value-3 data-x-internal=parsed-as-a-css-color-value>parsing</a> the given value with <var>context</var> if non-null.<li><p>If <var>parsedValue</var> is failure, then return.<li><p>Set <a id=fill-and-stroke-styles:this-10 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-stroke-style-4>stroke style</a> to
     <var>parsedValue</var>.<li><p>Return.</ol>
   <li><p>If the given value is a <code id=fill-and-stroke-styles:canvaspattern-6><a href=#canvaspattern>CanvasPattern</a></code> object that is marked as <a href=#concept-canvas-pattern-not-origin-clean id=fill-and-stroke-styles:concept-canvas-pattern-not-origin-clean-2>not origin-clean</a>, then set
   <a id=fill-and-stroke-styles:this-11 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-origin-clean id=fill-and-stroke-styles:concept-canvas-origin-clean-2>origin-clean</a> flag to
   false.<li><p>Set <a id=fill-and-stroke-styles:this-12 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=fill-and-stroke-styles:concept-canvasfillstrokestyles-stroke-style-5>stroke
   style</a> to the given value.</ol>

  

  <hr>

  <p>There are three types of gradients, linear gradients, radial gradients, and conic gradients,
  represented by objects implementing the opaque <code id=fill-and-stroke-styles:canvasgradient-5><a href=#canvasgradient>CanvasGradient</a></code> interface.</p>

  <p id=interpolation>Once a gradient has been created (see below), stops are placed along it to
  define how the colors are distributed along the gradient. The color of the
  gradient at each stop is the color specified for that stop. Between each such stop, the colors and
  the alpha component must be linearly interpolated over the RGBA space without premultiplying the
  alpha value to find the color to use at that offset. Before the first stop, the color must be the
  color of the first stop. After the last stop, the color must be the color of the last stop. When
  there are no stops, the gradient is <a id=fill-and-stroke-styles:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.</p>

  <dl class=domintro><dt><code><var>gradient</var>.<a href=#dom-canvasgradient-addcolorstop id=dom-canvasgradient-addcolorstop-dev>addColorStop</a>(<var>offset</var>, <var>color</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop title="The CanvasGradient.addColorStop() method adds a new color stop, defined by an offset and a color, to a given canvas gradient.">CanvasGradient/addColorStop</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Adds a color stop with the given color to the gradient at the given offset. 0.0 is the offset
    at one end of the gradient, 1.0 is the offset at the other end.</p>

    <p>Throws an <a id=fill-and-stroke-styles:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=fill-and-stroke-styles:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the offset
    is out of range. Throws a <a id=fill-and-stroke-styles:syntaxerror href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a> <code id=fill-and-stroke-styles:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    the color cannot be parsed.</p>
   <dt><code><var>gradient</var> = <var>context</var>.<a href=#dom-context-2d-createlineargradient id=dom-context-2d-createlineargradient-dev>createLinearGradient</a>(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient title="The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.">CanvasRenderingContext2D/createLinearGradient</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=fill-and-stroke-styles:canvasgradient-6><a href=#canvasgradient>CanvasGradient</a></code> object that represents a linear gradient that paints
    along the line given by the coordinates represented by the arguments.</p>
   <dt><code><var>gradient</var> = <var>context</var>.<a href=#dom-context-2d-createradialgradient id=dom-context-2d-createradialgradient-dev>createRadialGradient</a>(<var>x0</var>, <var>y0</var>, <var>r0</var>, <var>x1</var>, <var>y1</var>, <var>r1</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient title="The CanvasRenderingContext2D.createRadialGradient() method of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles.">CanvasRenderingContext2D/createRadialGradient</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=fill-and-stroke-styles:canvasgradient-7><a href=#canvasgradient>CanvasGradient</a></code> object that represents a radial gradient that paints
    along the cone given by the circles represented by the arguments.</p>

    <p>If either of the radii are negative, throws an <a id=fill-and-stroke-styles:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a>
    <code id=fill-and-stroke-styles:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <dt><code><var>gradient</var> = <var>context</var>.<a href=#dom-context-2d-createconicgradient id=dom-context-2d-createconicgradient-dev>createConicGradient</a>(<var>startAngle</var>, <var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient title="The CanvasRenderingContext2D.createConicGradient() method of the Canvas 2D API creates a gradient around a point with given coordinates.">CanvasRenderingContext2D/createConicGradient</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>112+</span></span><span class="safari yes"><span>Safari</span><span>16.1+</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns a <code id=fill-and-stroke-styles:canvasgradient-8><a href=#canvasgradient>CanvasGradient</a></code> object that represents a conic gradient that paints
   clockwise along the rotation around the center represented by the arguments.</dl>

  

  <p>The <dfn data-dfn-for=CanvasGradient id=dom-canvasgradient-addcolorstop data-dfn-type=method><code>addColorStop(<var>offset</var>,
  <var>color</var>)</code></dfn> method on the <code id=fill-and-stroke-styles:canvasgradient-9><a href=#canvasgradient>CanvasGradient</a></code>, when invoked, must run
  these steps:</p>

  <ol><li><p>If the <var>offset</var> is less than 0 or greater than 1, then throw an
   <a id=fill-and-stroke-styles:indexsizeerror-3 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=fill-and-stroke-styles:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>
    <p>Let <var>parsed color</var> be the result of <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id=fill-and-stroke-styles:parsed-as-a-css-color-value-4 data-x-internal=parsed-as-a-css-color-value>parsing</a> <var>color</var>.</p>

    <p class=note>No element is passed to the parser because <code id=fill-and-stroke-styles:canvasgradient-10><a href=#canvasgradient>CanvasGradient</a></code> objects
    are <code id=fill-and-stroke-styles:the-canvas-element><a href=#the-canvas-element>canvas</a></code>-neutral — a <code id=fill-and-stroke-styles:canvasgradient-11><a href=#canvasgradient>CanvasGradient</a></code> object created by one
    <code id=fill-and-stroke-styles:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> can be used by another, and there is therefore no way to know which is the
    "element in question" at the time that the color is specified.</p>
   <li><p>If <var>parsed color</var> is failure, throw a <a id=fill-and-stroke-styles:syntaxerror-2 href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a>
   <code id=fill-and-stroke-styles:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>
    <p>Place a new stop on the gradient, at offset <var>offset</var> relative to the whole gradient,
    and with the color <var>parsed color</var>.</p>

    <p>If multiple stops are added at the same offset on a gradient, then they must be placed in the
    order added, with the first one closest to the start of the gradient, and each subsequent one
    infinitesimally further along towards the end point (in effect causing all but the first and
    last stop added at each point to be ignored).</p>
   </ol>

  <p>The <dfn data-dfn-for=CanvasFillStrokeStyles id=dom-context-2d-createlineargradient data-dfn-type=method><code>createLinearGradient(<var>x0</var>, <var>y0</var>,
  <var>x1</var>, <var>y1</var>)</code></dfn> method takes four arguments that represent the start
  point (<var>x0</var>, <var>y0</var>) and end point (<var>x1</var>, <var>y1</var>) of the gradient.
  The method, when invoked, must return a linear <code id=fill-and-stroke-styles:canvasgradient-12><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
  specified line.</p>

  <p>Linear gradients must be rendered such that all points on a line perpendicular to the line that
  crosses the start and end points have the color at the point where those two lines cross (with the
  colors coming from the <a href=#interpolation>interpolation and extrapolation</a> described
  above). The points in the linear gradient must be transformed as described by the <a href=#transformations id=fill-and-stroke-styles:transformations>current transformation matrix</a> when rendering.</p>

  <p>If <var>x0</var> = <var>x1</var> and
  <var>y0</var> = <var>y1</var>, then the linear
  gradient must paint nothing.</p>

  <p>The <dfn data-dfn-for=CanvasFillStrokeStyles id=dom-context-2d-createradialgradient data-dfn-type=method><code>createRadialGradient(<var>x0</var>, <var>y0</var>,
  <var>r0</var>, <var>x1</var>, <var>y1</var>, <var>r1</var>)</code></dfn> method takes six
  arguments, the first three representing the start circle with origin (<var>x0</var>,
  <var>y0</var>) and radius <var>r0</var>, and the last three representing the end circle with
  origin (<var>x1</var>, <var>y1</var>) and radius <var>r1</var>. The values are in coordinate space
  units. If either of <var>r0</var> or <var>r1</var> are negative, then an
  <a id=fill-and-stroke-styles:indexsizeerror-4 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=fill-and-stroke-styles:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> must be thrown. Otherwise,
  the method, when invoked, must return a radial <code id=fill-and-stroke-styles:canvasgradient-13><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
  two specified circles.</p>

  <p>Radial gradients must be rendered by following these steps:</p>

  <ol><li><p>If <var>x<sub>0</sub></var> = <var>x<sub>1</sub></var> and <var>y<sub>0</sub></var> = <var>y<sub>1</sub></var> and <var>r<sub>0</sub></var> = <var>r<sub>1</sub></var>, then the radial gradient must
   paint nothing. Return.<li>
    <p>Let x(<var>ω</var>) = (<var>x<sub>1</sub></var>-<var>x<sub>0</sub></var>)<var>ω</var> + <var>x<sub>0</sub></var>.</p>

    <p>Let y(<var>ω</var>) = (<var>y<sub>1</sub></var>-<var>y<sub>0</sub></var>)<var>ω</var> + <var>y<sub>0</sub></var>.</p>

    <p>Let r(<var>ω</var>) = (<var>r<sub>1</sub></var>-<var>r<sub>0</sub></var>)<var>ω</var> + <var>r<sub>0</sub></var>.</p>

    <p>Let the color at <var>ω</var> be the color at that position on the gradient
    (with the colors coming from the <a href=#interpolation>interpolation and extrapolation</a>
    described above).</p>
   <li><p>For all values of <var>ω</var> where r(<var>ω</var>) > 0, starting with the value of <var>ω</var> nearest to positive infinity and ending with the value of <var>ω</var> nearest to negative infinity, draw the circumference of the circle with
   radius r(<var>ω</var>) at position (x(<var>ω</var>), y(<var>ω</var>)), with the
   color at <var>ω</var>, but only painting on the parts of the bitmap that have not
   yet been painted on by earlier circles in this step for this rendering of the gradient.</ol>

  <p class=note>This effectively creates a cone, touched by the two circles defined in the
  creation of the gradient, with the part of the cone before the start circle (0.0) using the color
  of the first offset, the part of the cone after the end circle (1.0) using the color of the last
  offset, and areas outside the cone untouched by the gradient (<a id=fill-and-stroke-styles:transparent-black-2 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>).</p>

  <p>The resulting radial gradient must then be transformed as described by the <a href=#transformations id=fill-and-stroke-styles:transformations-2>current transformation matrix</a> when rendering.</p>

  <p>The <dfn data-dfn-for=CanvasFillStrokeStyles id=dom-context-2d-createconicgradient data-dfn-type=method><code>createConicGradient(<var>startAngle</var>,
  <var>x</var>, <var>y</var>)</code></dfn> method takes three arguments, the first argument,
  <var>startAngle</var>, represents the angle in radians at which the gradient begins, and the last
  two arguments, (<var>x</var>, <var>y</var>), represent the center of the gradient in <a href=https://drafts.csswg.org/css-values/#px id="fill-and-stroke-styles:'px'" data-x-internal="'px'">CSS pixels</a>. The method, when invoked, must return a conic
  <code id=fill-and-stroke-styles:canvasgradient-14><a href=#canvasgradient>CanvasGradient</a></code> initialized with the specified center and angle.</p>

  <p>It follows the same rendering rule as CSS <a id="fill-and-stroke-styles:'conic-gradient'" href=https://drafts.csswg.org/css-images-4/#funcdef-conic-gradient data-x-internal="'conic-gradient'">'conic-gradient'</a> and it is
  equivalent to CSS 'conic-gradient(from <var>adjustedStartAngle</var>rad at
  <var>x</var>px <var>y</var>px, <var>angularColorStopList</var>)'. Here:</p>

  <ul><li><p><var>adjustedStartAngle</var> is given by <var>startAngle</var> + π/2;<li><p><var>angularColorStopList</var> is given by the color stops that have been added to the
   <code id=fill-and-stroke-styles:canvasgradient-15><a href=#canvasgradient>CanvasGradient</a></code> using <code id=fill-and-stroke-styles:dom-canvasgradient-addcolorstop><a href=#dom-canvasgradient-addcolorstop>addColorStop()</a></code>, with the color stop offsets
   interpreted as percentages.</ul>

  <p>Gradients must be painted only where the relevant stroking or filling effects requires that
  they be drawn.</p>

  

  <hr>

  <p>Patterns are represented by objects implementing the opaque <code id=fill-and-stroke-styles:canvaspattern-7><a href=#canvaspattern>CanvasPattern</a></code>
  interface.</p>

  <dl class=domintro><dt><code><var>pattern</var> = <var>context</var>.<a href=#dom-context-2d-createpattern id=dom-context-2d-createpattern-dev>createPattern</a>(<var>image</var>, <var>repetition</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern title="The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the specified image and repetition. This method returns a CanvasPattern.">CanvasRenderingContext2D/createPattern</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=fill-and-stroke-styles:canvaspattern-8><a href=#canvaspattern>CanvasPattern</a></code> object that uses the given image and repeats in the
    direction(s) given by the <var>repetition</var> argument.</p>

    <p>The allowed values for <var>repetition</var> are <code>repeat</code> (both
    directions), <code>repeat-x</code> (horizontal only), <code>repeat-y</code>
    (vertical only), and <code>no-repeat</code> (neither). If the <var>repetition</var>
    argument is empty, the value <code>repeat</code> is used.</p>

    <p>If the image isn't yet fully decoded, then nothing is drawn. If the image is a canvas with no
    data, throws an <a id=fill-and-stroke-styles:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=fill-and-stroke-styles:domexception-7><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <dt><code><var>pattern</var>.<a href=#dom-canvaspattern-settransform id=dom-canvaspattern-settransform-dev>setTransform</a>(<var>transform</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern/setTransform title="The CanvasPattern.setTransform() method uses a DOMMatrix object as the pattern's transformation matrix and invokes it on the pattern.">CanvasPattern/setTransform</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>33+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>68+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Sets the transformation matrix that will be used when rendering the pattern during a fill or
    stroke painting operation.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=CanvasFillStrokeStyles id=dom-context-2d-createpattern data-dfn-type=method><code>createPattern(<var>image</var>,
  <var>repetition</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>Let <var>usability</var> be the result of <a href=#check-the-usability-of-the-image-argument id=fill-and-stroke-styles:check-the-usability-of-the-image-argument>checking the usability of</a> <var>image</var>.<li><p>If <var>usability</var> is <i>bad</i>, then return null.<li><p><a id=fill-and-stroke-styles:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>usability</var> is <i>good</i>.<li><p>If <var>repetition</var> is the empty string, then set it to "<code>repeat</code>".</p>

   <li><p>If <var>repetition</var> is not <a id=fill-and-stroke-styles:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> one of "<code>repeat</code>", "<code>repeat-x</code>", "<code>repeat-y</code>",
   or "<code>no-repeat</code>", then throw a
   <a id=fill-and-stroke-styles:syntaxerror-3 href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a> <code id=fill-and-stroke-styles:domexception-8><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>pattern</var> be a new <code id=fill-and-stroke-styles:canvaspattern-9><a href=#canvaspattern>CanvasPattern</a></code> object with the image
   <var>image</var> and the repetition behavior given by <var>repetition</var>.<li><p>If <var>image</var> <a href=#the-image-argument-is-not-origin-clean id=fill-and-stroke-styles:the-image-argument-is-not-origin-clean>is not origin-clean</a>, then mark <var>pattern</var> as <dfn id=concept-canvas-pattern-not-origin-clean>not origin-clean</dfn>.<li><p>Return <var>pattern</var>.</ol>

  <p>Modifying the <var>image</var> used when creating a <code id=fill-and-stroke-styles:canvaspattern-10><a href=#canvaspattern>CanvasPattern</a></code> object
  after calling the <code id=fill-and-stroke-styles:dom-context-2d-createpattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method must
  not affect the pattern(s) rendered by the <code id=fill-and-stroke-styles:canvaspattern-11><a href=#canvaspattern>CanvasPattern</a></code> object.</p>

  <p>Patterns have a transformation matrix, which controls how the pattern is used when it is
  painted. Initially, a pattern's transformation matrix must be the identity matrix.</p>

  <p>The <dfn data-dfn-for=CanvasPattern id=dom-canvaspattern-settransform data-dfn-type=method><code>setTransform(<var>transform</var>)</code></dfn> method,
  when invoked, must run these steps:</p>

  <ol><li><p>Let <var>matrix</var> be the result of <a href=https://drafts.fxtf.org/geometry/#create-a-dommatrix-from-the-2d-dictionary id=fill-and-stroke-styles:create-a-dommatrix-from-a-2d-dictionary data-x-internal=create-a-dommatrix-from-a-2d-dictionary>creating a <code>DOMMatrix</code> from the 2D dictionary</a>
   <var>transform</var>.</p>

   <li><p>If one or more of <var>matrix</var>'s <a id=fill-and-stroke-styles:m11-element href=https://drafts.fxtf.org/geometry/#matrix-m11-element data-x-internal=m11-element>m11 element</a>, <a id=fill-and-stroke-styles:m12-element href=https://drafts.fxtf.org/geometry/#matrix-m12-element data-x-internal=m12-element>m12 element</a>,
   <a id=fill-and-stroke-styles:m21-element href=https://drafts.fxtf.org/geometry/#matrix-m21-element data-x-internal=m21-element>m21 element</a>, <a id=fill-and-stroke-styles:m22-element href=https://drafts.fxtf.org/geometry/#matrix-m22-element data-x-internal=m22-element>m22 element</a>, <a id=fill-and-stroke-styles:m41-element href=https://drafts.fxtf.org/geometry/#matrix-m41-element data-x-internal=m41-element>m41 element</a>, or <a id=fill-and-stroke-styles:m42-element href=https://drafts.fxtf.org/geometry/#matrix-m42-element data-x-internal=m42-element>m42
   element</a> are infinite or NaN, then return.<li><p>Reset the pattern's transformation matrix to <var>matrix</var>.</ol>

  <p>When a pattern is to be rendered within an area, the user agent must run the following steps to
  determine what is rendered:</p>

  <ol><li><p>Create an infinite <a id=fill-and-stroke-styles:transparent-black-3 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> bitmap.<li>
    <p>Place a copy of the image on the bitmap, anchored such that its top left corner is at the
    origin of the coordinate space, with one coordinate space unit per <a href=https://drafts.csswg.org/css-values/#px id="fill-and-stroke-styles:'px'-2" data-x-internal="'px'">CSS
    pixel</a> of the image, then place repeated copies of this image horizontally to the left and
    right, if the repetition behavior is "<code>repeat-x</code>", or vertically up and
    down, if the repetition behavior is "<code>repeat-y</code>", or in all four
    directions all over the bitmap, if the repetition behavior is "<code>repeat</code>".</p>

    <p>If the original image data is a bitmap image, then the value painted at a point in the area
    of the repetitions is computed by filtering the original image data. When scaling up, if the
    <code id=fill-and-stroke-styles:dom-context-2d-imagesmoothingenabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is
    set to false, then the image must be rendered using nearest-neighbor interpolation. Otherwise,
    the user agent may use any filtering algorithm (for example bilinear interpolation or
    nearest-neighbor). User agents which support multiple filtering algorithms may use the value of
    the <code id=fill-and-stroke-styles:dom-context-2d-imagesmoothingquality><a href=#dom-context-2d-imagesmoothingquality>imageSmoothingQuality</a></code> attribute
    to guide the choice of filtering algorithm. When such a filtering algorithm requires a pixel
    value from outside the original image data, it must instead use the value from wrapping the
    pixel's coordinates to the original image's dimensions. (That is, the filter uses 'repeat'
    behavior, regardless of the value of the pattern's repetition behavior.)</p> 
   <li><p>Transform the resulting bitmap according to the pattern's transformation matrix.<li><p>Transform the resulting bitmap again, this time according to the <a href=#transformations id=fill-and-stroke-styles:transformations-3>current transformation matrix</a>.<li><p>Replace any part of the image outside the area in which the pattern is to be rendered with
   <a id=fill-and-stroke-styles:transparent-black-4 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.<li><p>The resulting bitmap is what is to be rendered, with the same origin and same
   scale.</ol>

  <hr>

  <p>If a radial gradient or repeated pattern is used when the transformation matrix is singular,
  then the resulting style must be <a id=fill-and-stroke-styles:transparent-black-5 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> (otherwise the gradient or pattern
  would be collapsed to a point or line, leaving the other pixels undefined). Linear gradients and
  solid colors always define all points even with singular transformation matrices.</p>

  




  <h6 id=drawing-rectangles-to-the-bitmap><span class=secno>4.12.5.1.11</span> Drawing rectangles to the bitmap<a href=#drawing-rectangles-to-the-bitmap class=self-link></a></h6>

  <p>Objects that implement the <code id=drawing-rectangles-to-the-bitmap:canvasrect><a href=#canvasrect>CanvasRect</a></code> interface provide the following methods for
  immediately drawing rectangles to the bitmap. The methods each take four arguments; the first two
  give the <var>x</var> and <var>y</var> coordinates of the top left of the rectangle, and the
  second two give the width <var>w</var> and height <var>h</var> of the rectangle, respectively.</p>

  

  <p>The <a href=#transformations id=drawing-rectangles-to-the-bitmap:transformations>current transformation matrix</a> must be
  applied to the following four coordinates, which form the path that must then be closed to get the
  specified rectangle: <span>(<var>x</var>, <var>y</var>)</span>, <span>(<var>x</var>+<var>w</var>, <var>y</var>)</span>, <span>(<var>x</var>+<var>w</var>, <var>y</var>+<var>h</var>)</span>, <span>(<var>x</var>, <var>y</var>+<var>h</var>)</span>.</p>

  <p>Shapes are painted without affecting the <a href=#current-default-path id=drawing-rectangles-to-the-bitmap:current-default-path>current default path</a>, and are subject to
  the <a href=#clipping-region id=drawing-rectangles-to-the-bitmap:clipping-region>clipping region</a>, and, with the exception of <code id=drawing-rectangles-to-the-bitmap:dom-context-2d-clearrect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows id=drawing-rectangles-to-the-bitmap:shadows>shadow
  effects</a>, <a href=#concept-canvas-global-alpha id=drawing-rectangles-to-the-bitmap:concept-canvas-global-alpha>global alpha</a>, and the
  <a href=#current-compositing-and-blending-operator id=drawing-rectangles-to-the-bitmap:current-compositing-and-blending-operator>current compositing and blending operator</a>.</p>

  

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-clearrect id=dom-context-2d-clearrect-dev>clearRect</a>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect title="The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API erases the pixels in a rectangular area by setting them to transparent black.">CanvasRenderingContext2D/clearRect</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Clears all pixels on the bitmap in the given rectangle to <a id=drawing-rectangles-to-the-bitmap:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent
   black</a>.<dt><code><var>context</var>.<a href=#dom-context-2d-fillrect id=dom-context-2d-fillrect-dev>fillRect</a>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect title="The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current fillStyle.">CanvasRenderingContext2D/fillRect</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd><p>Paints the given rectangle onto the bitmap, using the current fill style.<dt><code><var>context</var>.<a href=#dom-context-2d-strokerect id=dom-context-2d-strokerect-dev>strokeRect</a>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect title="The CanvasRenderingContext2D.strokeRect() method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings.">CanvasRenderingContext2D/strokeRect</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Paints the box that outlines the given rectangle onto the bitmap, using the current stroke
    style.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=CanvasRect id=dom-context-2d-clearrect data-dfn-type=method><code>clearRect(<var>x</var>, <var>y</var>, <var>w</var>,
  <var>h</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p>Let <var>pixels</var> be the set of pixels in the specified rectangle that also
   intersect the current <a href=#clipping-region id=drawing-rectangles-to-the-bitmap:clipping-region-2>clipping region</a>.<li><p>Clear the pixels in <var>pixels</var> to a <a id=drawing-rectangles-to-the-bitmap:transparent-black-2 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>, erasing any
   previous image.</ol>

  <p class=note>If either height or width are zero, this method has no effect, since the set of
  pixels would be empty.</p>

  <p>The <dfn data-dfn-for=CanvasRect id=dom-context-2d-fillrect data-dfn-type=method><code>fillRect(<var>x</var>,
  <var>y</var>, <var>w</var>, <var>h</var>)</code></dfn> method, when invoked, must run these
  steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p>If either <var>w</var> or <var>h</var> are zero, then return.<li><p>Paint the specified rectangular area using <a id=drawing-rectangles-to-the-bitmap:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-fill-style id=drawing-rectangles-to-the-bitmap:concept-canvasfillstrokestyles-fill-style>fill style</a>.</ol>

  <p>The <dfn data-dfn-for=CanvasRect id=dom-context-2d-strokerect data-dfn-type=method><code>strokeRect(<var>x</var>, <var>y</var>, <var>w</var>,
  <var>h</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p>Take the result of <a href=#trace-a-path id=drawing-rectangles-to-the-bitmap:trace-a-path>tracing the path</a> described below,
   using the <code id=drawing-rectangles-to-the-bitmap:canvaspathdrawingstyles><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> interface's line styles, and fill it with
   <a id=drawing-rectangles-to-the-bitmap:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=drawing-rectangles-to-the-bitmap:concept-canvasfillstrokestyles-stroke-style>stroke
   style</a>.</ol>

  <p>If both <var>w</var> and <var>h</var> are zero, the path has a single subpath
  with just one point (<var>x</var>, <var>y</var>), and no lines, and this method
  thus has no effect (the <a href=#trace-a-path id=drawing-rectangles-to-the-bitmap:trace-a-path-2>trace a path</a> algorithm returns an empty path in that
  case).</p>

  <p>If just one of either <var>w</var> or <var>h</var> is zero, then the path has
  a single subpath consisting of two points, with coordinates (<var>x</var>, <var>y</var>) and (<var>x</var>+<var>w</var>, <var>y</var>+<var>h</var>), in that order, connected by a single straight line.</p>

  <p>Otherwise, the path has a single subpath consisting of four points, with coordinates (<span><var>x</var></span>, <var>y</var>), (<span><var>x</var>+<var>w</var></span>, <var>y</var>), (<var>x</var>+<var>w</var>,
  <var>y</var>+<var>h</var>), and (<var>x</var>, <var>y</var>+<var>h</var>),
  connected to each other in that order by straight lines.</p>

  



  <h6 id=drawing-text-to-the-bitmap><span class=secno>4.12.5.1.12</span> Drawing text to the bitmap<a href=#drawing-text-to-the-bitmap class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D title="The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.">CanvasRenderingContext2D</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <dl id=text-0 class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-filltext id=dom-context-2d-filltext-dev>fillText</a>(<var>text</var>, <var>x</var>, <var>y</var> [, <var>maxWidth</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText title="The CanvasRenderingContext2D method fillText(), part of the Canvas 2D API, draws a text string at the specified coordinates, filling the string's characters with the current fillStyle. An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.">CanvasRenderingContext2D/fillText</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-stroketext id=dom-context-2d-stroketext-dev>strokeText</a>(<var>text</var>, <var>x</var>, <var>y</var> [, <var>maxWidth</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeText title="The CanvasRenderingContext2D method strokeText(), part of the Canvas 2D API, strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.">CanvasRenderingContext2D/strokeText</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Fills or strokes (respectively) the given text at the given position. If a maximum width is
    provided, the text will be scaled to fit that width if necessary.</p>
   <dt><code><var>metrics</var> = <var>context</var>.<a href=#dom-context-2d-measuretext id=dom-context-2d-measuretext-dev>measureText</a>(<var>text</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText title="The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the measured text (such as its width, for example).">CanvasRenderingContext2D/measureText</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=drawing-text-to-the-bitmap:textmetrics><a href=#textmetrics>TextMetrics</a></code> object with the metrics of the given text in the current
    font.</p>
   <dt><code><var>metrics</var>.<a href=#dom-textmetrics-width id=dom-textmetrics-width-dev>width</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/width title="The read-only width property of the TextMetrics interface contains the text's advance width (the width of that inline box) in CSS pixels.">TextMetrics/width</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>31+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-actualboundingboxleft id=dom-textmetrics-actualboundingboxleft-dev>actualBoundingBoxLeft</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxLeft title="The read-only actualBoundingBoxLeft property of the TextMetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.">TextMetrics/actualBoundingBoxLeft</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-actualboundingboxright id=dom-textmetrics-actualboundingboxright-dev>actualBoundingBoxRight</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxRight title="The read-only actualBoundingBoxRight property of the TextMetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the right side of the bounding rectangle of the given text, in CSS pixels.">TextMetrics/actualBoundingBoxRight</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-fontboundingboxascent id=dom-textmetrics-fontboundingboxascent-dev>fontBoundingBoxAscent</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/fontBoundingBoxAscent title="The read-only fontBoundingBoxAscent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute, to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.">TextMetrics/fontBoundingBoxAscent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>116+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>87+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>87+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-fontboundingboxdescent id=dom-textmetrics-fontboundingboxdescent-dev>fontBoundingBoxDescent</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/fontBoundingBoxDescent title="The read-only fontBoundingBoxDescent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.">TextMetrics/fontBoundingBoxDescent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>116+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>87+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>87+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-actualboundingboxascent id=dom-textmetrics-actualboundingboxascent-dev>actualBoundingBoxAscent</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxAscent title="The read-only actualBoundingBoxAscent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels.">TextMetrics/actualBoundingBoxAscent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-actualboundingboxdescent id=dom-textmetrics-actualboundingboxdescent-dev>actualBoundingBoxDescent</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/actualBoundingBoxDescent title="The read-only actualBoundingBoxDescent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.">TextMetrics/actualBoundingBoxDescent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-emheightascent id=dom-textmetrics-emheightascent-dev>emHeightAscent</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/emHeightAscent title="The read-only emHeightAscent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the top of the em square in the line box, in CSS pixels.">TextMetrics/emHeightAscent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 35+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-emheightdescent id=dom-textmetrics-emheightdescent-dev>emHeightDescent</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/emHeightDescent title="The read-only emHeightDescent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the bottom of the em square in the line box, in CSS pixels.">TextMetrics/emHeightDescent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 35+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-hangingbaseline id=dom-textmetrics-hangingbaseline-dev>hangingBaseline</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/hangingBaseline title="The read-only hangingBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels.">TextMetrics/hangingBaseline</a><div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-alphabeticbaseline id=dom-textmetrics-alphabeticbaseline-dev>alphabeticBaseline</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/alphabeticBaseline title="The read-only alphabeticBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the alphabetic baseline of the line box, in CSS pixels.">TextMetrics/alphabeticBaseline</a><div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>metrics</var>.<a href=#dom-textmetrics-ideographicbaseline id=dom-textmetrics-ideographicbaseline-dev>ideographicBaseline</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/ideographicBaseline title="The read-only ideographicBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels.">TextMetrics/ideographicBaseline</a><div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 74+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the measurement described below.</dl>

  

  <p>Objects that implement the <code id=drawing-text-to-the-bitmap:canvastext><a href=#canvastext>CanvasText</a></code> interface provide the following methods for
  rendering text.</p>

  <p>The <dfn data-dfn-for=CanvasText id=dom-context-2d-filltext data-dfn-type=method><code>fillText(<var>text</var>, <var>x</var>, <var>y</var>,
  <var>maxWidth</var>)</code></dfn> and <dfn data-dfn-for=CanvasText id=dom-context-2d-stroketext data-dfn-type=method><code>strokeText(<var>text</var>, <var>x</var>, <var>y</var>,
  <var>maxWidth</var>)</code></dfn> methods render the given
  <var>text</var> at the given (<var>x</var>, <var>y</var>) coordinates ensuring that the text isn't
  wider than <var>maxWidth</var> if specified, using the current <code id=drawing-text-to-the-bitmap:dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code id=drawing-text-to-the-bitmap:dom-context-2d-textalign><a href=#dom-context-2d-textalign>textAlign</a></code>, and <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values. Specifically, when the methods
  are invoked, the user agent must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p>Run the <a href=#text-preparation-algorithm id=drawing-text-to-the-bitmap:text-preparation-algorithm>text preparation algorithm</a>, passing it <var>text</var>, the object
   implementing the <code id=drawing-text-to-the-bitmap:canvastext-2><a href=#canvastext>CanvasText</a></code> interface, and, if the <var>maxWidth</var> argument was
   provided, that argument. Let <var>glyphs</var> be the result.</p>

   <li><p>Move all the shapes in <var>glyphs</var> to the right by <var>x</var>
   <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'" data-x-internal="'px'">CSS pixels</a> and down by <var>y</var> <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-2" data-x-internal="'px'">CSS
   pixels</a>.<li>
    <p>Paint the shapes given in <var>glyphs</var>, as transformed by the <a href=#transformations id=drawing-text-to-the-bitmap:transformations>current transformation matrix</a>, with each <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-3" data-x-internal="'px'">CSS pixel</a> in the coordinate space of <var>glyphs</var> mapped to one
    coordinate space unit.</p>

    <p>For <code id=drawing-text-to-the-bitmap:dom-context-2d-filltext><a href=#dom-context-2d-filltext>fillText()</a></code>, <a id=drawing-text-to-the-bitmap:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-fill-style id=drawing-text-to-the-bitmap:concept-canvasfillstrokestyles-fill-style>fill style</a> must be applied to the
    shapes and <a id=drawing-text-to-the-bitmap:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=drawing-text-to-the-bitmap:concept-canvasfillstrokestyles-stroke-style>stroke
    style</a> must be ignored. For <code id=drawing-text-to-the-bitmap:dom-context-2d-stroketext><a href=#dom-context-2d-stroketext>strokeText()</a></code>,
    the reverse holds: <a id=drawing-text-to-the-bitmap:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=drawing-text-to-the-bitmap:concept-canvasfillstrokestyles-stroke-style-2>stroke style</a> must be applied to the
    result of <a href=#trace-a-path id=drawing-text-to-the-bitmap:trace-a-path>tracing</a> the shapes using the object implementing
    the <code id=drawing-text-to-the-bitmap:canvastext-3><a href=#canvastext>CanvasText</a></code> interface for the line styles, and <a id=drawing-text-to-the-bitmap:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasfillstrokestyles-fill-style id=drawing-text-to-the-bitmap:concept-canvasfillstrokestyles-fill-style-2>fill style</a> must be ignored.</p>

    <p>These shapes are painted without affecting the current path, and are subject to <a href=#shadows id=drawing-text-to-the-bitmap:shadows>shadow effects</a>, <a href=#concept-canvas-global-alpha id=drawing-text-to-the-bitmap:concept-canvas-global-alpha>global
    alpha</a>, the <a href=#clipping-region id=drawing-text-to-the-bitmap:clipping-region>clipping region</a>, and the <a href=#current-compositing-and-blending-operator id=drawing-text-to-the-bitmap:current-compositing-and-blending-operator>current compositing and blending
    operator</a>.</p>
   </ol>

  <p>
  <a id=drawing-text-to-the-bitmap:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
  The <dfn data-dfn-for=CanvasText id=dom-context-2d-measuretext data-dfn-type=method><code>measureText(<var>text</var>)</code></dfn> method steps are to
  run the <a href=#text-preparation-algorithm id=drawing-text-to-the-bitmap:text-preparation-algorithm-2>text preparation algorithm</a>, passing it <var>text</var> and the object
  implementing the <code id=drawing-text-to-the-bitmap:canvastext-4><a href=#canvastext>CanvasText</a></code> interface, and then using the returned <a id=drawing-text-to-the-bitmap:inline-box href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline
  box</a> return a new <code id=drawing-text-to-the-bitmap:textmetrics-2><a href=#textmetrics>TextMetrics</a></code> object with members behaving as described in
  the following list: <a href=references.html#refsCSS>[CSS]</a></p>

  

  <dl><dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-width data-dfn-type=attribute><code>width</code></dfn>
   attribute<dd><p>The width of that <a id=drawing-text-to-the-bitmap:inline-box-2 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-4" data-x-internal="'px'">CSS pixels</a>. (The
   text's advance width.)<dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-actualboundingboxleft data-dfn-type=attribute><code>actualBoundingBoxLeft</code></dfn> attribute<dd>
    <p>The distance parallel to the baseline from the alignment point given by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textalign-2><a href=#dom-context-2d-textalign>textAlign</a></code> attribute to the left side of the bounding
    rectangle of the given text, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-5" data-x-internal="'px'">CSS pixels</a>; positive numbers
    indicating a distance going left from the given alignment point.

    <p class=note>The sum of this value and the next (<code id=drawing-text-to-the-bitmap:dom-textmetrics-actualboundingboxright><a href=#dom-textmetrics-actualboundingboxright>actualBoundingBoxRight</a></code>) can be wider than
    the width of the <a id=drawing-text-to-the-bitmap:inline-box-3 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a> (<code id=drawing-text-to-the-bitmap:dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code>), in
    particular with slanted fonts where characters overhang their advance width.</p>
   <dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-actualboundingboxright data-dfn-type=attribute><code>actualBoundingBoxRight</code></dfn> attribute<dd>
    <p>The distance parallel to the baseline from the alignment point given by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textalign-3><a href=#dom-context-2d-textalign>textAlign</a></code> attribute to the right side of the bounding
    rectangle of the given text, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-6" data-x-internal="'px'">CSS pixels</a>; positive numbers
    indicating a distance going right from the given alignment point.</p>
   <dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-fontboundingboxascent data-dfn-type=attribute><code>fontBoundingBoxAscent</code></dfn> attribute<dd>
    <p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the <a id=drawing-text-to-the-bitmap:ascent-metric href=https://drafts.csswg.org/css-inline/#ascent-metric data-x-internal=ascent-metric>ascent
    metric</a> of the <a id=drawing-text-to-the-bitmap:first-available-font href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-7" data-x-internal="'px'">CSS
    pixels</a>; positive numbers indicating a distance going up from the given baseline.</p>

    <p class=note>This value and the next are useful when rendering a background that have to have
    a consistent height even if the exact text being rendered changes. The <code id=drawing-text-to-the-bitmap:dom-textmetrics-actualboundingboxascent><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></code> attribute (and
    its corresponding attribute for the descent) are useful when drawing a bounding box around
    specific text.</p>
   <dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-fontboundingboxdescent data-dfn-type=attribute><code>fontBoundingBoxDescent</code></dfn> attribute<dd><p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-3><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the <a id=drawing-text-to-the-bitmap:descent-metric href=https://drafts.csswg.org/css-inline/#descent-metric data-x-internal=descent-metric>descent
   metric</a> of the <a id=drawing-text-to-the-bitmap:first-available-font-2 href=https://drafts.csswg.org/css-fonts/#first-available-font data-x-internal=first-available-font>first available font</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-8" data-x-internal="'px'">CSS pixels</a>;
   positive numbers indicating a distance going down from the given baseline.<dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-actualboundingboxascent data-dfn-type=attribute><code>actualBoundingBoxAscent</code></dfn> attribute<dd>
    <p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-4><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the top of the bounding
    rectangle of the given text, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-9" data-x-internal="'px'">CSS pixels</a>; positive numbers
    indicating a distance going up from the given baseline.

    <p class=note>This number can vary greatly based on the input text, even if the first font
    specified covers all the characters in the input. For example, the <code id=drawing-text-to-the-bitmap:dom-textmetrics-actualboundingboxascent-2><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></code> of a lowercase
    "o" from an <a id=drawing-text-to-the-bitmap:alphabetic-baseline href=https://drafts.csswg.org/css-inline/#alphabetic-baseline data-x-internal=alphabetic-baseline>alphabetic baseline</a> would be less than that of an uppercase "F". The
    value can easily be negative; for example, the distance from the top of the em box (<code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-5><a href=#dom-context-2d-textbaseline>textBaseline</a></code> value "<code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>") to the top of the bounding rectangle when
    the given text is just a single comma "<code>,</code>" would likely (unless the font is
    quite unusual) be negative.</p>
   <dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-actualboundingboxdescent data-dfn-type=attribute><code>actualBoundingBoxDescent</code></dfn> attribute<dd><p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-6><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the bottom of the bounding
   rectangle of the given text, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-10" data-x-internal="'px'">CSS pixels</a>; positive numbers
   indicating a distance going down from the given baseline.<dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-emheightascent data-dfn-type=attribute><code>emHeightAscent</code></dfn> attribute<dd><p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-7><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the <a id=drawing-text-to-the-bitmap:em-over-baseline href=https://drafts.csswg.org/css-inline/#em-over-baseline data-x-internal=em-over-baseline>em-over
   baseline</a> in the <a id=drawing-text-to-the-bitmap:inline-box-4 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-11" data-x-internal="'px'">CSS pixels</a>;
   positive numbers indicating that the given baseline is below the <a id=drawing-text-to-the-bitmap:em-over-baseline-2 href=https://drafts.csswg.org/css-inline/#em-over-baseline data-x-internal=em-over-baseline>em-over baseline</a>
   (so this value will usually be positive). Zero if the given baseline is the <a id=drawing-text-to-the-bitmap:em-over-baseline-3 href=https://drafts.csswg.org/css-inline/#em-over-baseline data-x-internal=em-over-baseline>em-over
   baseline</a>; half the font size if the given baseline is halfway between the <a id=drawing-text-to-the-bitmap:em-over-baseline-4 href=https://drafts.csswg.org/css-inline/#em-over-baseline data-x-internal=em-over-baseline>em-over
   baseline</a> and the <a id=drawing-text-to-the-bitmap:em-under-baseline href=https://drafts.csswg.org/css-inline/#em-under-baseline data-x-internal=em-under-baseline>em-under baseline</a>.<dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-emheightdescent data-dfn-type=attribute><code>emHeightDescent</code></dfn> attribute<dd><p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-8><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the <a id=drawing-text-to-the-bitmap:em-under-baseline-2 href=https://drafts.csswg.org/css-inline/#em-under-baseline data-x-internal=em-under-baseline>em-under
   baseline</a> in the <a id=drawing-text-to-the-bitmap:inline-box-5 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-12" data-x-internal="'px'">CSS pixels</a>;
   positive numbers indicating that the given baseline is above the <a id=drawing-text-to-the-bitmap:em-under-baseline-3 href=https://drafts.csswg.org/css-inline/#em-under-baseline data-x-internal=em-under-baseline>em-under baseline</a>.
   (Zero if the given baseline is the <a id=drawing-text-to-the-bitmap:em-under-baseline-4 href=https://drafts.csswg.org/css-inline/#em-under-baseline data-x-internal=em-under-baseline>em-under baseline</a>.)<dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-hangingbaseline data-dfn-type=attribute><code>hangingBaseline</code></dfn> attribute<dd><p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-9><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the <a id=drawing-text-to-the-bitmap:hanging-baseline href=https://drafts.csswg.org/css-inline/#hanging-baseline data-x-internal=hanging-baseline>hanging
   baseline</a> of the <a id=drawing-text-to-the-bitmap:inline-box-6 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-13" data-x-internal="'px'">CSS pixels</a>;
   positive numbers indicating that the given baseline is below the <a id=drawing-text-to-the-bitmap:hanging-baseline-2 href=https://drafts.csswg.org/css-inline/#hanging-baseline data-x-internal=hanging-baseline>hanging baseline</a>.
   (Zero if the given baseline is the <a id=drawing-text-to-the-bitmap:hanging-baseline-3 href=https://drafts.csswg.org/css-inline/#hanging-baseline data-x-internal=hanging-baseline>hanging baseline</a>.)<dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-alphabeticbaseline data-dfn-type=attribute><code>alphabeticBaseline</code></dfn> attribute<dd><p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-10><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the <a id=drawing-text-to-the-bitmap:alphabetic-baseline-2 href=https://drafts.csswg.org/css-inline/#alphabetic-baseline data-x-internal=alphabetic-baseline>alphabetic
   baseline</a> of the <a id=drawing-text-to-the-bitmap:inline-box-7 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-14" data-x-internal="'px'">CSS pixels</a>;
   positive numbers indicating that the given baseline is below the <a id=drawing-text-to-the-bitmap:alphabetic-baseline-3 href=https://drafts.csswg.org/css-inline/#alphabetic-baseline data-x-internal=alphabetic-baseline>alphabetic
   baseline</a>. (Zero if the given baseline is the <a id=drawing-text-to-the-bitmap:alphabetic-baseline-4 href=https://drafts.csswg.org/css-inline/#alphabetic-baseline data-x-internal=alphabetic-baseline>alphabetic baseline</a>.)<dt><dfn data-dfn-for=TextMetrics id=dom-textmetrics-ideographicbaseline data-dfn-type=attribute><code>ideographicBaseline</code></dfn> attribute<dd><p>The distance from the horizontal line indicated by the <code id=drawing-text-to-the-bitmap:dom-context-2d-textbaseline-11><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the <a id=drawing-text-to-the-bitmap:ideographic-under-baseline href=https://drafts.csswg.org/css-inline/#ideographic-under-baseline data-x-internal=ideographic-under-baseline>ideographic-under
   baseline</a> of the <a id=drawing-text-to-the-bitmap:inline-box-8 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, in <a href=https://drafts.csswg.org/css-values/#px id="drawing-text-to-the-bitmap:'px'-15" data-x-internal="'px'">CSS pixels</a>;
   positive numbers indicating that the given baseline is below the <a id=drawing-text-to-the-bitmap:ideographic-under-baseline-2 href=https://drafts.csswg.org/css-inline/#ideographic-under-baseline data-x-internal=ideographic-under-baseline>ideographic-under
   baseline</a>. (Zero if the given baseline is the <a id=drawing-text-to-the-bitmap:ideographic-under-baseline-3 href=https://drafts.csswg.org/css-inline/#ideographic-under-baseline data-x-internal=ideographic-under-baseline>ideographic-under
   baseline</a>.)</dl>

  <p class=note>Glyphs rendered using <code id=drawing-text-to-the-bitmap:dom-context-2d-filltext-2><a href=#dom-context-2d-filltext>fillText()</a></code> and
  <code id=drawing-text-to-the-bitmap:dom-context-2d-stroketext-2><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out of the box given by the
  font size and the width returned by <code id=drawing-text-to-the-bitmap:dom-context-2d-measuretext><a href=#dom-context-2d-measuretext>measureText()</a></code>
  (the text width). Authors are encouraged to use the bounding box values described above if this is
  an issue.</p>

  <p class=note>A future version of the 2D context API might provide a way to render fragments of
  documents, rendered using CSS, straight to the canvas. This would be provided in preference to a
  dedicated way of doing multiline layout.</p>



  <h6 id=drawing-paths-to-the-canvas><span class=secno>4.12.5.1.13</span> Drawing paths to the canvas<a href=#drawing-paths-to-the-canvas class=self-link></a></h6>

  <p>Objects that implement the <code id=drawing-paths-to-the-canvas:canvasdrawpath><a href=#canvasdrawpath>CanvasDrawPath</a></code> interface have a <dfn id=current-default-path>current default
  path</dfn>. There is only one <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path>current default path</a>, it is not part of the
  <a href=#drawing-state id=drawing-paths-to-the-canvas:drawing-state>drawing state</a>. The <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-2>current default path</a> is a <a href=#concept-path id=drawing-paths-to-the-canvas:concept-path>path</a>, as described above.</p>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-beginpath id=dom-context-2d-beginpath-dev>beginPath</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath title="The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.">CanvasRenderingContext2D/beginPath</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Resets the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-3>current default path</a>.<dt><code><var>context</var>.<a href=#dom-context-2d-fill id=dom-context-2d-fill-dev>fill</a>([ <var>fillRule</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill title="The CanvasRenderingContext2D.fill() method of the Canvas 2D API fills the current or given path with the current fillStyle.">CanvasRenderingContext2D/fill</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-fill id=drawing-paths-to-the-canvas:dom-context-2d-fill>fill</a>(<var>path</var> [, <var>fillRule</var> ])</code><dd>
    <p>Fills the subpaths of the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-4>current default path</a> or the given path with the
    current fill style, obeying the given fill rule.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-stroke id=dom-context-2d-stroke-dev>stroke</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke title="The CanvasRenderingContext2D.stroke() method of the Canvas 2D API strokes (outlines) the current or given path with the current stroke style.">CanvasRenderingContext2D/stroke</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-stroke id=drawing-paths-to-the-canvas:dom-context-2d-stroke>stroke</a>(<var>path</var>)</code><dd>
    <p>Strokes the subpaths of the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-5>current default path</a> or the given path with the
    current stroke style.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-clip id=dom-context-2d-clip-dev>clip</a>([ <var>fillRule</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip title="The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region.">CanvasRenderingContext2D/clip</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-clip id=drawing-paths-to-the-canvas:dom-context-2d-clip>clip</a>(<var>path</var> [, <var>fillRule</var> ])</code><dd>
    <p>Further constrains the clipping region to the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-6>current default path</a> or the given
    path, using the given fill rule to determine what points are in the path.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-ispointinpath id=dom-context-2d-ispointinpath-dev>isPointInPath</a>(<var>x</var>, <var>y</var> [, <var>fillRule</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath title="The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not the specified point is contained in the current path.">CanvasRenderingContext2D/isPointInPath</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-ispointinpath id=drawing-paths-to-the-canvas:dom-context-2d-ispointinpath>isPointInPath</a>(<var>path</var>, <var>x</var>, <var>y</var> [, <var>fillRule</var> ])</code><dd>
    <p>Returns true if the given point is in the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-7>current default path</a> or the given
    path, using the given fill rule to determine what points are in the path.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-ispointinstroke id=dom-context-2d-ispointinstroke-dev>isPointInStroke</a>(<var>x</var>, <var>y</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInStroke title="The CanvasRenderingContext2D.isPointInStroke() method of the Canvas 2D API reports whether or not the specified point is inside the area contained by the stroking of a path.">CanvasRenderingContext2D/isPointInStroke</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>19+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-ispointinstroke id=drawing-paths-to-the-canvas:dom-context-2d-ispointinstroke>isPointInStroke</a>(<var>path</var>, <var>x</var>, <var>y</var>)</code><dd>
    <p>Returns true if the given point would be in the region covered by the stroke of the
    <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-8>current default path</a> or the given path, given the current stroke style.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-beginpath data-dfn-type=method><code>beginPath()</code></dfn> method steps are to empty the list of
  subpaths in <a id=drawing-paths-to-the-canvas:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-9>current default path</a> so that it once again has zero
  subpaths.</p>

  <p>Where the following method definitions use the term <dfn id=intended-path>intended path</dfn> for a
  <code id=drawing-paths-to-the-canvas:path2d><a href=#path2d>Path2D</a></code>-or-null <var>path</var>, it means <var>path</var> itself if it is a
  <code id=drawing-paths-to-the-canvas:path2d-2><a href=#path2d>Path2D</a></code> object, or the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-10>current default path</a> otherwise.</p>

  <p>When the <a href=#intended-path id=drawing-paths-to-the-canvas:intended-path>intended path</a> is a <code id=drawing-paths-to-the-canvas:path2d-3><a href=#path2d>Path2D</a></code> object, the coordinates and lines
  of its subpaths must be transformed according to the <a href=#transformations id=drawing-paths-to-the-canvas:transformations> current transformation matrix</a> on the object
  implementing the <code id=drawing-paths-to-the-canvas:canvastransform><a href=#canvastransform>CanvasTransform</a></code> interface when used by these methods (without
  affecting the <code id=drawing-paths-to-the-canvas:path2d-4><a href=#path2d>Path2D</a></code> object itself). When the intended path is the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-11>current
  default path</a>, it is not affected by the transform. (This is because transformations
  already affect the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-12>current default path</a> when it is constructed, so applying it when
  it is painted as well would result in a double transformation.)</p>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-fill data-dfn-type=method><code>fill(<var>fillRule</var>)</code></dfn> method steps are to run the
  <a href=#fill-steps id=drawing-paths-to-the-canvas:fill-steps>fill steps</a> given <a id=drawing-paths-to-the-canvas:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, null, and <var>fillRule</var>.</p>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-fill-path data-dfn-type=method><code>fill(<var>path</var>, <var>fillRule</var>)</code></dfn> method
  steps are to run the <a href=#fill-steps id=drawing-paths-to-the-canvas:fill-steps-2>fill steps</a> given <a id=drawing-paths-to-the-canvas:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>path</var>, and
  <var>fillRule</var>.</p>

  <p>The <dfn id=fill-steps>fill steps</dfn>, given a <code id=drawing-paths-to-the-canvas:canvasdrawpath-2><a href=#canvasdrawpath>CanvasDrawPath</a></code> <var>context</var>, a
  <code id=drawing-paths-to-the-canvas:path2d-5><a href=#path2d>Path2D</a></code>-or-null <var>path</var>, and a <a href=#fill-rule id=drawing-paths-to-the-canvas:fill-rule>fill rule</a> <var>fillRule</var>,
  are to fill all the subpaths of the <a href=#intended-path id=drawing-paths-to-the-canvas:intended-path-2>intended path</a> for <var>path</var>, using
  <var>context</var>'s <a href=#concept-canvasfillstrokestyles-fill-style id=drawing-paths-to-the-canvas:concept-canvasfillstrokestyles-fill-style>fill style</a>,
  and using the <a href=#fill-rule id=drawing-paths-to-the-canvas:fill-rule-2>fill rule</a> indicated by <var>fillRule</var>. Open subpaths must be
  implicitly closed when being filled (without affecting the actual subpaths).</p>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-stroke data-dfn-type=method><code>stroke()</code></dfn> method steps are to run the <a href=#stroke-steps id=drawing-paths-to-the-canvas:stroke-steps>stroke
  steps</a> given <a id=drawing-paths-to-the-canvas:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and null.</p>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-stroke-path data-dfn-type=method><code>stroke(<var>path</var>)</code></dfn> method steps are to run
  the <a href=#stroke-steps id=drawing-paths-to-the-canvas:stroke-steps-2>stroke steps</a> given <a id=drawing-paths-to-the-canvas:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and <var>path</var>.</p>

  <p>The <dfn id=stroke-steps>stroke steps</dfn>, given a <code id=drawing-paths-to-the-canvas:canvasdrawpath-3><a href=#canvasdrawpath>CanvasDrawPath</a></code> <var>context</var> and a
  <code id=drawing-paths-to-the-canvas:path2d-6><a href=#path2d>Path2D</a></code>-or-null <var>path</var>, are to <a href=#trace-a-path id=drawing-paths-to-the-canvas:trace-a-path>trace</a> the
  <a href=#intended-path id=drawing-paths-to-the-canvas:intended-path-3>intended path</a> for <var>path</var>, using <var>context</var>'s line styles as set by
  its <code id=drawing-paths-to-the-canvas:canvaspathdrawingstyles><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> mixin, and then fill the resulting path using
  <var>context</var>'s <a href=#concept-canvasfillstrokestyles-stroke-style id=drawing-paths-to-the-canvas:concept-canvasfillstrokestyles-stroke-style>stroke
  style</a>, using the <a href=#dom-context-2d-fillrule-nonzero id=drawing-paths-to-the-canvas:dom-context-2d-fillrule-nonzero>nonzero winding
  rule</a>.</p>

  <p class=note>As a result of how the algorithm to <a href=#trace-a-path id=drawing-paths-to-the-canvas:trace-a-path-2>trace a path</a> is defined,
  overlapping parts of the paths in one stroke operation are treated as if their union was what was
  painted.</p>

  <p class=note>The stroke <em>style</em> is affected by the transformation during painting, even
  if the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-13>current default path</a> is used.</p>

  <p>Paths, when filled or stroked, must be painted without affecting the <a href=#current-default-path id=drawing-paths-to-the-canvas:current-default-path-14>current default
  path</a> or any <code id=drawing-paths-to-the-canvas:path2d-7><a href=#path2d>Path2D</a></code> objects, and must be subject to <a href=#shadows id=drawing-paths-to-the-canvas:shadows>shadow effects</a>, <a href=#concept-canvas-global-alpha id=drawing-paths-to-the-canvas:concept-canvas-global-alpha>global
  alpha</a>, the <a href=#clipping-region id=drawing-paths-to-the-canvas:clipping-region>clipping region</a>, and the <a href=#current-compositing-and-blending-operator id=drawing-paths-to-the-canvas:current-compositing-and-blending-operator>current compositing and blending
  operator</a>. (The effect of transformations is described above and varies based on which path
  is being used.)</p>

  <hr>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-clip data-dfn-type=method><code>clip(<var>fillRule</var>)</code></dfn> method steps are to run the
  <a href=#clip-steps id=drawing-paths-to-the-canvas:clip-steps>clip steps</a> given <a id=drawing-paths-to-the-canvas:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, null, and <var>fillRule</var>.</p>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-clip-path data-dfn-type=method><code>clip(<var>path</var>, <var>fillRule</var>)</code></dfn> method
  steps are to run the <a href=#clip-steps id=drawing-paths-to-the-canvas:clip-steps-2>clip steps</a> given <a id=drawing-paths-to-the-canvas:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>path</var>, and
  <var>fillRule</var>.</p>

  <p>The <dfn id=clip-steps>clip steps</dfn>, given a <code id=drawing-paths-to-the-canvas:canvasdrawpath-4><a href=#canvasdrawpath>CanvasDrawPath</a></code> <var>context</var>, a
  <code id=drawing-paths-to-the-canvas:path2d-8><a href=#path2d>Path2D</a></code>-or-null <var>path</var>, and a <a href=#fill-rule id=drawing-paths-to-the-canvas:fill-rule-3>fill rule</a> <var>fillRule</var>,
  are to create a new <dfn id=clipping-region>clipping region</dfn> by calculating the intersection of
  <var>context</var>'s current clipping region and the area described by the <a href=#intended-path id=drawing-paths-to-the-canvas:intended-path-4>intended
  path</a> for <var>path</var>, using the <a href=#fill-rule id=drawing-paths-to-the-canvas:fill-rule-4>fill rule</a> indicated by
  <var>fillRule</var>. Open subpaths must be implicitly closed when computing the clipping region,
  without affecting the actual subpaths. The new clipping region replaces the current clipping
  region.</p>

  <p>When the context is initialized, its current clipping region must be set to the largest
  infinite surface (i.e. by default, no clipping occurs).</p>

  

  <hr>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-ispointinpath data-dfn-type=method><code>isPointInPath(<var>x</var>, <var>y</var>,
  <var>fillRule</var>)</code></dfn> method steps are to return the result of the <a href=#is-point-in-path-steps id=drawing-paths-to-the-canvas:is-point-in-path-steps>is point in
  path steps</a> given <a id=drawing-paths-to-the-canvas:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, null, <var>x</var>, <var>y</var>, and
  <var>fillRule</var>.</p>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-ispointinpath-path data-dfn-type=method><code>isPointInPath(<var>path</var>, <var>x</var>,
  <var>y</var>, <var>fillRule</var>)</code></dfn> method steps are to return the result of the
  <a href=#is-point-in-path-steps id=drawing-paths-to-the-canvas:is-point-in-path-steps-2>is point in path steps</a> given <a id=drawing-paths-to-the-canvas:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>path</var>, <var>x</var>, <var>y</var>,
  and <var>fillRule</var>.</p>

  <p>The <dfn id=is-point-in-path-steps>is point in path steps</dfn>, given a <code id=drawing-paths-to-the-canvas:canvasdrawpath-5><a href=#canvasdrawpath>CanvasDrawPath</a></code> <var>context</var>,
  a <code id=drawing-paths-to-the-canvas:path2d-9><a href=#path2d>Path2D</a></code>-or-null <var>path</var>, two numbers <var>x</var> and <var>y</var>, and a
  <a href=#fill-rule id=drawing-paths-to-the-canvas:fill-rule-5>fill rule</a> <var>fillRule</var>, are:</p>

  <ol><li><p>If <var>x</var> or <var>y</var> are infinite or NaN, then return false.<li><p>If the point given by the <var>x</var> and <var>y</var> coordinates, when treated as
   coordinates in the canvas coordinate space unaffected by the current transformation, is inside
   the <a href=#intended-path id=drawing-paths-to-the-canvas:intended-path-5>intended path</a> for <var>path</var> as determined by the <a href=#fill-rule id=drawing-paths-to-the-canvas:fill-rule-6>fill rule</a>
   indicated by <var>fillRule</var>, then return true. Open subpaths must be implicitly closed when
   computing the area inside the path, without affecting the actual subpaths. Points on the path
   itself must be considered to be inside the path.<li><p>Return false.</ol>

  <hr>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-ispointinstroke data-dfn-type=method><code>isPointInStroke(<var>x</var>, <var>y</var>)</code></dfn>
  method steps are to return the result of the <a href=#is-point-in-stroke-steps id=drawing-paths-to-the-canvas:is-point-in-stroke-steps>is point in stroke steps</a> given
  <a id=drawing-paths-to-the-canvas:this-10 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, null, <var>x</var>, and <var>y</var>.</p>

  <p>The <dfn data-dfn-for=CanvasDrawPath id=dom-context-2d-ispointinstroke-path data-dfn-type=method><code>isPointInStroke(<var>path</var>, <var>x</var>,
  <var>y</var>)</code></dfn> method steps are to return the result of the <a href=#is-point-in-stroke-steps id=drawing-paths-to-the-canvas:is-point-in-stroke-steps-2>is point in stroke
  steps</a> given <a id=drawing-paths-to-the-canvas:this-11 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>path</var>, <var>x</var>, and <var>y</var>.</p>

  <p>The <dfn id=is-point-in-stroke-steps>is point in stroke steps</dfn>, given a <code id=drawing-paths-to-the-canvas:canvasdrawpath-6><a href=#canvasdrawpath>CanvasDrawPath</a></code>
  <var>context</var>, a <code id=drawing-paths-to-the-canvas:path2d-10><a href=#path2d>Path2D</a></code>-or-null <var>path</var>, and two numbers <var>x</var>
  and <var>y</var>, are:</p>

  <ol><li><p>If <var>x</var> or <var>y</var> are infinite or NaN, then return false.<li><p>If the point given by the <var>x</var> and <var>y</var> coordinates, when treated as
   coordinates in the canvas coordinate space unaffected by the current transformation, is inside
   the path that results from <a href=#trace-a-path id=drawing-paths-to-the-canvas:trace-a-path-3>tracing</a> the <a href=#intended-path id=drawing-paths-to-the-canvas:intended-path-6>intended
   path</a> for <var>path</var>, using the <a href=#dom-context-2d-fillrule-nonzero id=drawing-paths-to-the-canvas:dom-context-2d-fillrule-nonzero-2>nonzero winding rule</a>, and using
   <var>context</var>'s line styles as set by its <code id=drawing-paths-to-the-canvas:canvaspathdrawingstyles-2><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code> mixin, then
   return true. Points on the resulting path must be considered to be inside the path.<li><p>Return false.</ol>

  <hr>

  

  <div id=drawCustomFocusRingExample class=example><a href=#drawCustomFocusRingExample class=self-link></a>

   <p>This <code id=drawing-paths-to-the-canvas:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element has a couple of checkboxes. The path-related commands are
   highlighted:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>canvas</c-> <c- e>height</c-><c- o>=</c-><c- s>400</c-> <c- e>width</c-><c- o>=</c-><c- s>750</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>id</c-><c- o>=</c-><c- s>showA</c-><c- p>&gt;</c-> Show As<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>id</c-><c- o>=</c-><c- s>showB</c-><c- p>&gt;</c-> Show Bs<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- c>&lt;!-- ... --&gt;</c->
<c- p>&lt;/</c-><c- f>canvas</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> drawCheckbox<c- p>(</c->context<c- p>,</c-> element<c- p>,</c-> x<c- p>,</c-> y<c- p>,</c-> paint<c- p>)</c-> <c- p>{</c->
   context<c- p>.</c->save<c- p>();</c->
   context<c- p>.</c->font <c- o>=</c-> <c- t>&apos;10px sans-serif&apos;</c-><c- p>;</c->
   context<c- p>.</c->textAlign <c- o>=</c-> <c- t>&apos;left&apos;</c-><c- p>;</c->
   context<c- p>.</c->textBaseline <c- o>=</c-> <c- t>&apos;middle&apos;</c-><c- p>;</c->
   <c- a>var</c-> metrics <c- o>=</c-> context<c- p>.</c->measureText<c- p>(</c->element<c- p>.</c->labels<c- p>[</c-><c- mf>0</c-><c- p>].</c->textContent<c- p>);</c->
   <c- k>if</c-> <c- p>(</c->paint<c- p>)</c-> <c- p>{</c->
<strong>     context<c- p>.</c->beginPath<c- p>();</c->
     context<c- p>.</c->strokeStyle <c- o>=</c-> <c- t>&apos;black&apos;</c-><c- p>;</c->
     context<c- p>.</c->rect<c- p>(</c->x<c- o>-</c-><c- mf>5</c-><c- p>,</c-> y<c- o>-</c-><c- mf>5</c-><c- p>,</c-> <c- mf>10</c-><c- p>,</c-> <c- mf>10</c-><c- p>);</c->
     context<c- p>.</c->stroke<c- p>();</c->
</strong>     <c- k>if</c-> <c- p>(</c->element<c- p>.</c->checked<c- p>)</c-> <c- p>{</c->
<strong>       context<c- p>.</c->fillStyle <c- o>=</c-> <c- t>&apos;black&apos;</c-><c- p>;</c->
       context<c- p>.</c->fill<c- p>();</c->
</strong>     <c- p>}</c->
     context<c- p>.</c->fillText<c- p>(</c->element<c- p>.</c->labels<c- p>[</c-><c- mf>0</c-><c- p>].</c->textContent<c- p>,</c-> x<c- o>+</c-><c- mf>5</c-><c- p>,</c-> y<c- p>);</c->
   <c- p>}</c->
<strong>   context<c- p>.</c->beginPath<c- p>();</c->
   context<c- p>.</c->rect<c- p>(</c->x<c- o>-</c-><c- mf>7</c-><c- p>,</c-> y<c- o>-</c-><c- mf>7</c-><c- p>,</c-> <c- mf>12</c-> <c- o>+</c-> metrics<c- p>.</c->width<c- o>+</c-><c- mf>2</c-><c- p>,</c-> <c- mf>14</c-><c- p>);</c->
</strong>
   context<c- p>.</c->drawFocusIfNeeded<c- p>(</c->element<c- p>);</c->
   context<c- p>.</c->restore<c- p>();</c->
 <c- p>}</c->
 <c- a>function</c-> drawBase<c- p>()</c-> <c- p>{</c-> <c- d>/* ... */</c-> <c- p>}</c->
 <c- a>function</c-> drawAs<c- p>()</c-> <c- p>{</c-> <c- d>/* ... */</c-> <c- p>}</c->
 <c- a>function</c-> drawBs<c- p>()</c-> <c- p>{</c-> <c- d>/* ... */</c-> <c- p>}</c->
 <c- a>function</c-> redraw<c- p>()</c-> <c- p>{</c->
   <c- a>var</c-> canvas <c- o>=</c-> document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>];</c->
   <c- a>var</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->
   context<c- p>.</c->clearRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->
   drawCheckbox<c- p>(</c->context<c- p>,</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showA&apos;</c-><c- p>),</c-> <c- mf>20</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- kc>true</c-><c- p>);</c->
   drawCheckbox<c- p>(</c->context<c- p>,</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showB&apos;</c-><c- p>),</c-> <c- mf>20</c-><c- p>,</c-> <c- mf>60</c-><c- p>,</c-> <c- kc>true</c-><c- p>);</c->
   drawBase<c- p>();</c->
   <c- k>if</c-> <c- p>(</c->document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showA&apos;</c-><c- p>).</c->checked<c- p>)</c->
     drawAs<c- p>();</c->
   <c- k>if</c-> <c- p>(</c->document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showB&apos;</c-><c- p>).</c->checked<c- p>)</c->
     drawBs<c- p>();</c->
 <c- p>}</c->
 <c- a>function</c-> processClick<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
   <c- a>var</c-> canvas <c- o>=</c-> document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>];</c->
   <c- a>var</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->
   <c- a>var</c-> x <c- o>=</c-> event<c- p>.</c->clientX<c- p>;</c->
   <c- a>var</c-> y <c- o>=</c-> event<c- p>.</c->clientY<c- p>;</c->
   <c- a>var</c-> node <c- o>=</c-> event<c- p>.</c->target<c- p>;</c->
   <c- k>while</c-> <c- p>(</c->node<c- p>)</c-> <c- p>{</c->
     x <c- o>-=</c-> node<c- p>.</c->offsetLeft <c- o>-</c-> node<c- p>.</c->scrollLeft<c- p>;</c->
     y <c- o>-=</c-> node<c- p>.</c->offsetTop <c- o>-</c-> node<c- p>.</c->scrollTop<c- p>;</c->
     node <c- o>=</c-> node<c- p>.</c->offsetParent<c- p>;</c->
   <c- p>}</c->
   drawCheckbox<c- p>(</c->context<c- p>,</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showA&apos;</c-><c- p>),</c-> <c- mf>20</c-><c- p>,</c-> <c- mf>40</c-><c- p>,</c-> <c- kc>false</c-><c- p>);</c->
   <c- k>if</c-> <c- p>(</c-><strong>context<c- p>.</c->isPointInPath<c- p>(</c->x<c- p>,</c-> y<c- p>)</c-></strong><c- p>)</c->
     document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showA&apos;</c-><c- p>).</c->checked <c- o>=</c-> <c- o>!</c-><c- p>(</c->document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showA&apos;</c-><c- p>).</c->checked<c- p>);</c->
   drawCheckbox<c- p>(</c->context<c- p>,</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showB&apos;</c-><c- p>),</c-> <c- mf>20</c-><c- p>,</c-> <c- mf>60</c-><c- p>,</c-> <c- kc>false</c-><c- p>);</c->
   <c- k>if</c-> <c- p>(</c-><strong>context<c- p>.</c->isPointInPath<c- p>(</c->x<c- p>,</c-> y<c- p>)</c-></strong><c- p>)</c->
     document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showB&apos;</c-><c- p>).</c->checked <c- o>=</c-> <c- o>!</c-><c- p>(</c->document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;showB&apos;</c-><c- p>).</c->checked<c- p>);</c->
   redraw<c- p>();</c->
 <c- p>}</c->
 document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->addEventListener<c- p>(</c-><c- t>&apos;focus&apos;</c-><c- p>,</c-> redraw<c- p>,</c-> <c- kc>true</c-><c- p>);</c->
 document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->addEventListener<c- p>(</c-><c- t>&apos;blur&apos;</c-><c- p>,</c-> redraw<c- p>,</c-> <c- kc>true</c-><c- p>);</c->
 document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->addEventListener<c- p>(</c-><c- t>&apos;change&apos;</c-><c- p>,</c-> redraw<c- p>,</c-> <c- kc>true</c-><c- p>);</c->
 document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> processClick<c- p>,</c-> <c- kc>false</c-><c- p>);</c->
 redraw<c- p>();</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>


  </div>

  <h6 id=drawing-focus-rings-and-scrolling-paths-into-view><span class=secno>4.12.5.1.14</span> Drawing focus rings<a href=#drawing-focus-rings-and-scrolling-paths-into-view class=self-link></a></h6>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-drawfocusifneeded id=dom-context-2d-drawfocusifneeded-dev>drawFocusIfNeeded</a>(<var>element</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded title="The CanvasRenderingContext2D.drawFocusIfNeeded() method of the Canvas 2D API draws a focus ring around the current or given path, if the specified element is focused.">CanvasRenderingContext2D/drawFocusIfNeeded</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>32+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>If <var>element</var> is <a id=drawing-focus-rings-and-scrolling-paths-into-view:focused href=interaction.html#focused>focused</a>, draws a focus ring around the <a href=#current-default-path id=drawing-focus-rings-and-scrolling-paths-into-view:current-default-path>current
    default path</a>, following the platform conventions for focus rings.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-drawfocusifneeded-path-element id=dom-context-2d-drawfocusifneeded-path-element-dev>drawFocusIfNeeded</a>(<var>path</var>, <var>element</var>)</code><dd>
    <p>If <var>element</var> is <a id=drawing-focus-rings-and-scrolling-paths-into-view:focused-2 href=interaction.html#focused>focused</a>, draws a focus ring around <var>path</var>,
    following the platform conventions for focus rings.</p>
   </dl>

  

  <p>Objects that implement the <code id=drawing-focus-rings-and-scrolling-paths-into-view:canvasuserinterface><a href=#canvasuserinterface>CanvasUserInterface</a></code> interface provide the following
  methods to draw focus rings.</p>

  <p id=dom-context-2d-drawosfocusring>The <dfn data-dfn-for=CanvasUserInterface id=dom-context-2d-drawfocusifneeded data-dfn-type=method><code>drawFocusIfNeeded(<var>element</var>)</code></dfn>
  method steps are to <a href=#draw-focus-if-needed id=drawing-focus-rings-and-scrolling-paths-into-view:draw-focus-if-needed>draw focus if needed</a> given <a id=drawing-focus-rings-and-scrolling-paths-into-view:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>,
  <var>element</var>, and <a id=drawing-focus-rings-and-scrolling-paths-into-view:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#current-default-path id=drawing-focus-rings-and-scrolling-paths-into-view:current-default-path-2>current default path</a>.</p>

  
  <p>The <dfn data-dfn-for=CanvasUserInterface id=dom-context-2d-drawfocusifneeded-path-element data-dfn-type=method><code>drawFocusIfNeeded(<var>path</var>,
  <var>element</var>)</code></dfn> method steps are to <a href=#draw-focus-if-needed id=drawing-focus-rings-and-scrolling-paths-into-view:draw-focus-if-needed-2>draw focus if needed</a> given
  <a id=drawing-focus-rings-and-scrolling-paths-into-view:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>element</var>, and <var>path</var>.</p>

  <p>To <dfn id=draw-focus-if-needed>draw focus if needed</dfn>, given an object implementing
  <code id=drawing-focus-rings-and-scrolling-paths-into-view:canvasuserinterface-2><a href=#canvasuserinterface>CanvasUserInterface</a></code> <var>context</var>, an element <var>element</var>, and a <a href=#concept-path id=drawing-focus-rings-and-scrolling-paths-into-view:concept-path>path</a> <var>path</var>:</p>

  <ol><li><p>If <var>element</var> is not <a id=drawing-focus-rings-and-scrolling-paths-into-view:focused-3 href=interaction.html#focused>focused</a> or is not a descendant of
   <var>context</var>'s <code id=drawing-focus-rings-and-scrolling-paths-into-view:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element, then return.<li>
    <p>Draw a focus ring of the appropriate style along <var>path</var>, following platform
    conventions.</p>

    <p class=note>Some platforms only draw focus rings around elements that have been focused from
    the keyboard, and not those focused from the mouse. Other platforms simply don't draw focus
    rings around some elements at all unless relevant accessibility features are enabled. This API
    is intended to follow these conventions. User agents that implement distinctions based on the
    manner in which the element was focused are encouraged to classify focus driven by the <code id=drawing-focus-rings-and-scrolling-paths-into-view:dom-focus><a href=interaction.html#dom-focus>focus()</a></code> method based on the kind of user interaction event from which
    the call was triggered (if any).</p>

    <p>The focus ring should not be subject to the <a href=#shadows id=drawing-focus-rings-and-scrolling-paths-into-view:shadows>shadow effects</a>,
    the <a href=#concept-canvas-global-alpha id=drawing-focus-rings-and-scrolling-paths-into-view:concept-canvas-global-alpha>global alpha</a>, the <a href=#current-compositing-and-blending-operator id=drawing-focus-rings-and-scrolling-paths-into-view:current-compositing-and-blending-operator>current
    compositing and blending operator</a>, the <a href=#concept-canvasfillstrokestyles-fill-style id=drawing-focus-rings-and-scrolling-paths-into-view:concept-canvasfillstrokestyles-fill-style>fill style</a>, the <a href=#concept-canvasfillstrokestyles-stroke-style id=drawing-focus-rings-and-scrolling-paths-into-view:concept-canvasfillstrokestyles-stroke-style>stroke style</a>, or any of the members
    in the <code id=drawing-focus-rings-and-scrolling-paths-into-view:canvaspathdrawingstyles><a href=#canvaspathdrawingstyles>CanvasPathDrawingStyles</a></code>, <code id=drawing-focus-rings-and-scrolling-paths-into-view:canvastextdrawingstyles><a href=#canvastextdrawingstyles>CanvasTextDrawingStyles</a></code> interfaces,
    but <em>should</em> be subject to the <a href=#clipping-region id=drawing-focus-rings-and-scrolling-paths-into-view:clipping-region>clipping region</a>. (The effect of
    transformations is described above and varies based on which path is being used.)</p>
   <li><p><a href=#inform>Inform the user</a> that the focus is at the location given by the
   intended path. User agents may wait until the next time the <a id=drawing-focus-rings-and-scrolling-paths-into-view:event-loop href=webappapis.html#event-loop>event loop</a> reaches its
   <a id=drawing-focus-rings-and-scrolling-paths-into-view:update-the-rendering href=webappapis.html#update-the-rendering>update the rendering</a> step to optionally inform the user.</ol>

  <p>User agents should not implicitly close open subpaths in the intended path when drawing the
  focus ring.</p>

  <p class=note>This might be a moot point, however. For example, if the focus ring is drawn as an
  axis-aligned bounding rectangle around the points in the intended path, then whether the subpaths
  are closed or not has no effect. This specification intentionally does not specify precisely how
  focus rings are to be drawn: user agents are expected to honor their platform's native
  conventions.</p>

  <p id=inform>"Inform the user", as used in this section, does not imply any persistent state
  change. It could mean, for instance, calling a system accessibility API to notify assistive
  technologies such as magnification tools so that the user's magnifier moves to the given area of
  the canvas. However, it does not associate the path with the element, or provide a region for
  tactile feedback, etc.</p>

  

  <h6 id=drawing-images><span class=secno>4.12.5.1.15</span> Drawing images<a href=#drawing-images class=self-link></a></h6>

  <p>Objects that implement the <code id=drawing-images:canvasdrawimage><a href=#canvasdrawimage>CanvasDrawImage</a></code> interface have the <dfn data-dfn-for=CanvasDrawImage id=dom-context-2d-drawimage data-dfn-type=method><code>drawImage()</code></dfn> method to
  draw images.</p>

  

  <p>This method can be invoked with three different sets of arguments:</p>

  <ul class=brief><li><code>drawImage(<var>image</var>, <var>dx</var>, <var>dy</var>)</code>
   <li><code>drawImage(<var>image</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</code>
   <li><code>drawImage(<var>image</var>, <var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</code>
  </ul>

  

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-drawimage id=dom-context-2d-drawimage-dev>drawImage</a>(<var>image</var>, <var>dx</var>, <var>dy</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage title="The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to draw an image onto the canvas.">CanvasRenderingContext2D/drawImage</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-drawimage id=drawing-images:dom-context-2d-drawimage>drawImage</a>(<var>image</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</code><dt><code><var>context</var>.<a href=#dom-context-2d-drawimage id=drawing-images:dom-context-2d-drawimage-2>drawImage</a>(<var>image</var>, <var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</code><dd>
    <p>Draws the given image onto the canvas. The arguments are interpreted as follows:</p>

    <p><img src=../images/drawImage.png width=356 alt="The sx and sy parameters give
    the x and y coordinates of the source rectangle; the sw and sh arguments give the width and
    height of the source rectangle; the dx and dy give the x and y coordinates of the destination
    rectangle; and the dw and dh arguments give the width and height of the destination
    rectangle." height=356></p>

    <p>If the image isn't yet fully decoded, then nothing is drawn. If the image is a canvas with no
    data, throws an <a id=drawing-images:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=drawing-images:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   </dl>

  

  <p>When the <code id=drawing-images:dom-context-2d-drawimage-3><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is invoked, the user
  agent must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then return.<li><p>Let <var>usability</var> be the result of <a href=#check-the-usability-of-the-image-argument id=drawing-images:check-the-usability-of-the-image-argument>checking the usability of <var>image</var></a>.<li><p>If <var>usability</var> is <i>bad</i>, then return (without drawing anything).<li>
    <p>Establish the source and destination rectangles as follows:</p>

    <p>If not specified, the <var>dw</var> and <var>dh</var> arguments must default to the values of
    <var>sw</var> and <var>sh</var>, interpreted such that one <a href=https://drafts.csswg.org/css-values/#px id="drawing-images:'px'" data-x-internal="'px'">CSS pixel</a>
    in the image is treated as one unit in the <a href=#output-bitmap id=drawing-images:output-bitmap>output bitmap</a>'s coordinate space. If the
    <var>sx</var>, <var>sy</var>, <var>sw</var>, and <var>sh</var> arguments are omitted, then they
    must default to 0, 0, the image's <a id=drawing-images:natural-width href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> in image pixels, and the image's
    <a id=drawing-images:natural-height href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> in image pixels, respectively. If the image has no <a id=drawing-images:natural-dimensions href=https://drafts.csswg.org/css-images/#natural-dimensions data-x-internal=natural-dimensions>natural
    dimensions</a>, then the <i>concrete object size</i> must be used instead, as determined
    using the CSS "<a href=https://drafts.csswg.org/css-images/#default-sizing>Concrete Object
    Size Resolution</a>" algorithm, with the <i>specified size</i> having neither a definite width
    nor height, nor any additional constraints, the object's natural properties being those of the
    <var>image</var> argument, and the <a id=drawing-images:default-object-size href=https://drafts.csswg.org/css-images/#default-object-size data-x-internal=default-object-size>default object size</a> being the size of the
    <a href=#output-bitmap id=drawing-images:output-bitmap-2>output bitmap</a>. <a href=references.html#refsCSSIMAGES>[CSSIMAGES]</a></p>

    <p>The source rectangle is the rectangle whose corners are the four points (<var>sx</var>, <var>sy</var>), (<var>sx</var>+<var>sw</var>, <var>sy</var>), (<var>sx</var>+<var>sw</var>, <var>sy</var>+<var>sh</var>),
    (<var>sx</var>, <var>sy</var>+<var>sh</var>).</p>

    <p>The destination rectangle is the rectangle whose corners are the four points (<var>dx</var>, <var>dy</var>), (<var>dx</var>+<var>dw</var>, <var>dy</var>), (<var>dx</var>+<var>dw</var>, <var>dy</var>+<var>dh</var>),
    (<var>dx</var>, <var>dy</var>+<var>dh</var>).</p>

    <p>When the source rectangle is outside the source image, the source rectangle must be clipped
    to the source image and the destination rectangle must be clipped in the same proportion.</p>

    <p class=note>When the destination rectangle is outside the destination image (the
    <a href=#output-bitmap id=drawing-images:output-bitmap-3>output bitmap</a>), the pixels that land outside the <a href=#output-bitmap id=drawing-images:output-bitmap-4>output bitmap</a> are
    discarded, as if the destination was an infinite canvas whose rendering was clipped to the
    dimensions of the <a href=#output-bitmap id=drawing-images:output-bitmap-5>output bitmap</a>.</p>
   <li><p>If one of the <var>sw</var> or <var>sh</var> arguments is zero, then return. Nothing is
   painted.<li>
    <p>Paint the region of the <var>image</var> argument specified by the source rectangle
    on the region of the rendering context's <a href=#output-bitmap id=drawing-images:output-bitmap-6>output bitmap</a> specified by the
    destination rectangle, after applying the <a href=#transformations id=drawing-images:transformations>current
    transformation matrix</a> to the destination rectangle.</p>

    <p>The image data must be processed in the original direction, even if the dimensions given are
    negative. </p>

    <p>When scaling up, if the <code id=drawing-images:dom-context-2d-imagesmoothingenabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is set to
    true, the user agent should attempt to apply a smoothing algorithm to the image data when it is
    scaled. User agents which support multiple filtering algorithms may use the value of the <code id=drawing-images:dom-context-2d-imagesmoothingquality><a href=#dom-context-2d-imagesmoothingquality>imageSmoothingQuality</a></code> attribute to guide
    the choice of filtering algorithm when the <code id=drawing-images:dom-context-2d-imagesmoothingenabled-2><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is set to
    true. Otherwise, the image must be rendered using nearest-neighbor interpolation.</p>

    <p class=note>This specification does not define the precise algorithm to use when scaling an
    image down, or when scaling an image up when the <code id=drawing-images:dom-context-2d-imagesmoothingenabled-3><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is set to
    true.</p>

    <p class=note>When a <code id=drawing-images:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element is drawn onto itself, the <a href=#drawing-model id=drawing-images:drawing-model>drawing
    model</a> requires the source to be copied before the image is drawn, so it is possible to
    copy parts of a <code id=drawing-images:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> element onto overlapping parts of itself.</p>

    <p>If the original image data is a bitmap image, then the value painted at a point in the
    destination rectangle is computed by filtering the original image data. The user agent may use
    any filtering algorithm (for example bilinear interpolation or nearest-neighbor). When the
    filtering algorithm requires a pixel value from outside the original image data, it must instead
    use the value from the nearest edge pixel. (That is, the filter uses 'clamp-to-edge' behavior.)
    When the filtering algorithm requires a pixel value from outside the source rectangle but inside
    the original image data, then the value from the original image data must be used.</p>
    
    

    <p class=note>Thus, scaling an image in parts or in whole will have the same effect. This does
    mean that when sprites coming from a single sprite sheet are to be scaled, adjacent images in
    the sprite sheet can interfere. This can be avoided by ensuring each sprite in the sheet is
    surrounded by a border of <a id=drawing-images:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>, or by copying sprites to be scaled
    into temporary <code id=drawing-images:the-canvas-element-3><a href=#the-canvas-element>canvas</a></code> elements and drawing the scaled sprites from there.</p>

    <p>Images are painted without affecting the current path, and are subject to <a href=#shadows id=drawing-images:shadows>shadow effects</a>, <a href=#concept-canvas-global-alpha id=drawing-images:concept-canvas-global-alpha>global
    alpha</a>, the <a href=#clipping-region id=drawing-images:clipping-region>clipping region</a>, and the <a href=#current-compositing-and-blending-operator id=drawing-images:current-compositing-and-blending-operator>current compositing and blending
    operator</a>.</p>
   <li><p>If <var>image</var> <a href=#the-image-argument-is-not-origin-clean id=drawing-images:the-image-argument-is-not-origin-clean>is not origin-clean</a>, then set the
   <code id=drawing-images:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>'s <a href=#concept-canvas-origin-clean id=drawing-images:concept-canvas-origin-clean>origin-clean</a> flag to false.</ol>

  


  <h6 id=pixel-manipulation><span class=secno>4.12.5.1.16</span> <dfn>Pixel manipulation</dfn><a href=#pixel-manipulation class=self-link></a></h6>

  <dl class=domintro><dt><code><var>imageData</var> = <var>context</var>.<a href=#dom-context-2d-createimagedata-imagedata id=dom-context-2d-createimagedata-imagedata-dev>createImageData</a>(<var>imageData</var>)</code><dd><p>Returns an <code id=pixel-manipulation:imagedata><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object with the same dimensions and color space as the
   argument. All the pixels in the returned object are <a id=pixel-manipulation:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.<dt><code><var>imageData</var> = <var>context</var>.<a href=#dom-context-2d-createimagedata id=dom-context-2d-createimagedata-dev>createImageData</a>(<var>sw</var>, <var>sh</var> [, <var>settings</var>])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData title="The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.">CanvasRenderingContext2D/createImageData</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns an <code id=pixel-manipulation:imagedata-2><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object with the given dimensions. The color space of the
    returned object is the <a href=#concept-canvas-color-space id=pixel-manipulation:concept-canvas-color-space>color space</a> of
    <var>context</var> unless overridden by <var>settings</var>. All the pixels in the returned
    object are <a id=pixel-manipulation:transparent-black-2 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.</p>

    <p>Throws an <a id=pixel-manipulation:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=pixel-manipulation:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if either of
    the width or height arguments are zero.</p>
   <dt><code><var>imageData</var> = <var>context</var>.<a href=#dom-context-2d-getimagedata id=dom-context-2d-getimagedata-dev>getImageData</a>(<var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var> [, <var>settings</var>])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData title="The CanvasRenderingContext2D method getImageData() of the Canvas 2D API returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.">CanvasRenderingContext2D/getImageData</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>9.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns an <code id=pixel-manipulation:imagedata-3><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object containing the image data for the given rectangle of
    the bitmap. The color space of the returned object is the <a href=#concept-canvas-color-space id=pixel-manipulation:concept-canvas-color-space-2>color space</a> of <var>context</var> unless overridden
    by <var>settings</var>.</p>

    <p>Throws an <a id=pixel-manipulation:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=pixel-manipulation:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the either
    of the width or height arguments are zero.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-putimagedata id=dom-context-2d-putimagedata-dev>putImageData</a>(<var>imageData</var>, <var>dx</var>, <var>dy</var> [, <var>dirtyX</var>, <var>dirtyY</var>, <var>dirtyWidth</var>, <var>dirtyHeight</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData title="The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.">CanvasRenderingContext2D/putImageData</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Paints the data from the given <code id=pixel-manipulation:imagedata-4><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object onto the bitmap. If a dirty
    rectangle is provided, only the pixels from that rectangle are painted.</p>

    <p>The <code id=pixel-manipulation:dom-context-2d-globalalpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code id=pixel-manipulation:dom-context-2d-globalcompositeoperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> properties, as
    well as the <a href=#shadows id=pixel-manipulation:shadows>shadow attributes</a>, are ignored for the purposes of
    this method call; pixels in the canvas are replaced wholesale, with no composition, alpha
    blending, no shadows, etc.</p>

    <p>Throws an <a id=pixel-manipulation:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=pixel-manipulation:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    <var>imageData</var> object's <code id=pixel-manipulation:dom-imagedata-data><a href=imagebitmap-and-animations.html#dom-imagedata-data>data</a></code> attribute value's
    [[ViewedArrayBuffer]] internal slot is detached.</p>
   </dl>

  

  <p>Objects that implement the <code id=pixel-manipulation:canvasimagedata><a href=#canvasimagedata>CanvasImageData</a></code> interface provide the following methods
  for reading and writing pixel data to the bitmap.</p>

  <p>The <dfn data-dfn-for=CanvasImageData id=dom-context-2d-createimagedata data-dfn-type=method><code>createImageData(<var>sw</var>, <var>sh</var>,
  <var>settings</var>)</code></dfn> method steps are:</p>

  <ol><li><p>If one or both of <var>sw</var> and <var>sh</var> are zero, then throw an
   <a id=pixel-manipulation:indexsizeerror-3 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=pixel-manipulation:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>newImageData</var> be a <a id=pixel-manipulation:new href=https://webidl.spec.whatwg.org/#new data-x-internal=new>new</a> <code id=pixel-manipulation:imagedata-5><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object.<li><p><a href=imagebitmap-and-animations.html#initialize-an-imagedata-object id=pixel-manipulation:initialize-an-imagedata-object>Initialize</a> <var>newImageData</var>
   given the absolute magnitude of <var>sw</var>, the absolute magnitude of <var>sh</var>,
   <var>settings</var>, and <i><a href=imagebitmap-and-animations.html#initialize-imagedata-defaultcolorspace id=pixel-manipulation:initialize-imagedata-defaultcolorspace>
   defaultColorSpace</a></i> set to <a id=pixel-manipulation:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
   <a href=#concept-canvas-color-space id=pixel-manipulation:concept-canvas-color-space-3>color space</a>.<li><p>Initialize the image data of <var>newImageData</var> to <a id=pixel-manipulation:transparent-black-3 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent
   black</a>.<li><p>Return <var>newImageData</var>.</ol>

  <p>The <dfn data-dfn-for=CanvasImageData id=dom-context-2d-createimagedata-imagedata data-dfn-type=method><code>createImageData(<var>imageData</var>)</code></dfn>
  method steps are:</p>

  <ol><li><p>Let <var>newImageData</var> be a <a id=pixel-manipulation:new-2 href=https://webidl.spec.whatwg.org/#new data-x-internal=new>new</a> <code id=pixel-manipulation:imagedata-6><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object.<li><p>Let <var>settings</var> be the <code id=pixel-manipulation:imagedatasettings><a href=imagebitmap-and-animations.html#imagedatasettings>ImageDataSettings</a></code> object «[
   "<code id=pixel-manipulation:dom-imagedatasettings-colorspace><a href=imagebitmap-and-animations.html#dom-imagedatasettings-colorspace>colorSpace</a></code>" →
   <a id=pixel-manipulation:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=imagebitmap-and-animations.html#dom-imagedata-colorspace id=pixel-manipulation:dom-imagedata-colorspace>colorSpace</a>,
   "<code id=pixel-manipulation:dom-imagedatasettings-pixelformat><a href=imagebitmap-and-animations.html#dom-imagedatasettings-pixelformat>pixelFormat</a></code>" →
   <a id=pixel-manipulation:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=imagebitmap-and-animations.html#dom-imagedata-pixelformat id=pixel-manipulation:dom-imagedata-pixelformat>pixelFormat</a> ]».<li><p><a href=imagebitmap-and-animations.html#initialize-an-imagedata-object id=pixel-manipulation:initialize-an-imagedata-object-2>Initialize</a> <var>newImageData</var>
   given the value of <var>imageData</var>'s <code id=pixel-manipulation:dom-imagedata-width><a href=imagebitmap-and-animations.html#dom-imagedata-width>width</a></code>
   attribute, the value of <var>imageData</var>'s <code id=pixel-manipulation:dom-imagedata-height><a href=imagebitmap-and-animations.html#dom-imagedata-height>height</a></code>
   attribute, and <var>settings</var>.<li><p>Initialize the image data of <var>newImageData</var> to <a id=pixel-manipulation:transparent-black-4 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent
   black</a>.<li><p>Return <var>newImageData</var>.</ol>

  <p>The <dfn data-dfn-for=CanvasImageData id=dom-context-2d-getimagedata data-dfn-type=method><code>getImageData(<var>sx</var>, <var>sy</var>, <var>sw</var>,
  <var>sh</var>, <var>settings</var>)</code></dfn> method steps are:</p>

  <ol><li><p>If either the <var>sw</var> or <var>sh</var> arguments are zero, then throw an
   <a id=pixel-manipulation:indexsizeerror-4 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=pixel-manipulation:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If the <code id=pixel-manipulation:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>'s <a href=#concept-canvas-origin-clean id=pixel-manipulation:concept-canvas-origin-clean>origin-clean</a> flag is set to false, then throw a
   <a id=pixel-manipulation:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=pixel-manipulation:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>imageData</var> be a <a id=pixel-manipulation:new-3 href=https://webidl.spec.whatwg.org/#new data-x-internal=new>new</a> <code id=pixel-manipulation:imagedata-7><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object.<li><p><a href=imagebitmap-and-animations.html#initialize-an-imagedata-object id=pixel-manipulation:initialize-an-imagedata-object-3>Initialize</a> <var>imageData</var> given
   <var>sw</var>, <var>sh</var>, <var>settings</var>, and
   <i><a href=imagebitmap-and-animations.html#initialize-imagedata-defaultcolorspace id=pixel-manipulation:initialize-imagedata-defaultcolorspace-2>defaultColorSpace</a></i> set to
   <a id=pixel-manipulation:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-color-space id=pixel-manipulation:concept-canvas-color-space-4>color space</a>.<li><p>Let the source rectangle be the rectangle whose corners are the four points
   (<var>sx</var>, <var>sy</var>), (<span><var>sx</var>+<var>sw</var></span>,
   <var>sy</var>), (<span><var>sx</var>+<var>sw</var></span>, <span><var>sy</var>+<var>sh</var></span>), (<var>sx</var>,
   <var>sy</var>+<var>sh</var>).<li><p>Set the pixel values of <var>imageData</var> to be the pixels of <a id=pixel-manipulation:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
   <a href=#output-bitmap id=pixel-manipulation:output-bitmap>output bitmap</a> in the area specified by the source rectangle in the bitmap's
   coordinate space units, converted from <a id=pixel-manipulation:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-color-space id=pixel-manipulation:concept-canvas-color-space-5>color space</a> to <var>imageData</var>'s <code id=pixel-manipulation:dom-imagedata-colorspace-2><a href=imagebitmap-and-animations.html#dom-imagedata-colorspace>colorSpace</a></code> using <a id="pixel-manipulation:'relative-colorimetric'" href=https://drafts.csswg.org/css-color-5/#valdef-color-profile-rendering-intent-relative-colorimetric data-x-internal="'relative-colorimetric'">'relative-colorimetric'</a>
   rendering intent.<li><p>Set the pixels values of <var>imageData</var> for areas of the source rectangle that are
   outside of the <a href=#output-bitmap id=pixel-manipulation:output-bitmap-2>output bitmap</a> to <a id=pixel-manipulation:transparent-black-5 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.<li><p>Return <var>imageData</var>.</ol>


  <p>The <dfn data-dfn-for=CanvasImageData id=dom-context-2d-putimagedata-short data-dfn-type=method><code>putImageData(<var>imageData</var>,
  <var>dx</var>, <var>dy</var>)</code></dfn> method steps are to
  <a href=#dom-context2d-putimagedata-common id=pixel-manipulation:dom-context2d-putimagedata-common>put pixels from an
  <code>ImageData</code> onto a bitmap</a>, given
  <var>imageData</var>, <a id=pixel-manipulation:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#output-bitmap id=pixel-manipulation:output-bitmap-3>output bitmap</a>,
  <var>dx</var>, <var>dy</var>, 0, 0,
  <var>imageData</var>'s <code id=pixel-manipulation:dom-imagedata-width-2><a href=imagebitmap-and-animations.html#dom-imagedata-width>width</a></code>, and
  <var>imageData</var>'s <code id=pixel-manipulation:dom-imagedata-height-2><a href=imagebitmap-and-animations.html#dom-imagedata-height>height</a></code>.</p>

  <p>The <dfn data-dfn-for=CanvasImageData id=dom-context-2d-putimagedata data-dfn-type=method><code>putImageData(<var>imageData</var>,
  <var>dx</var>, <var>dy</var>, <var>dirtyX</var>, <var>dirtyY</var>,
  <var>dirtyWidth</var>, <var>dirtyHeight</var>)</code></dfn> method steps are to
  <a href=#dom-context2d-putimagedata-common id=pixel-manipulation:dom-context2d-putimagedata-common-2>put pixels from an
  <code>ImageData</code> onto a bitmap</a>, given
  <var>imageData</var>, <a id=pixel-manipulation:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#output-bitmap id=pixel-manipulation:output-bitmap-4>output bitmap</a>,
  <var>dx</var>, <var>dy</var>, <var>dirtyX</var>, <var>dirtyY</var>,
  <var>dirtyWidth</var>, and <var>dirtyHeight</var>.</p>

  <p>To <dfn id=dom-context2d-putimagedata-common>put pixels from an <code>ImageData</code>
  onto a bitmap</dfn>, given an <code id=pixel-manipulation:imagedata-8><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> <var>imageData</var>,
  an <a href=#output-bitmap id=pixel-manipulation:output-bitmap-5>output bitmap</a> <var>bitmap</var>, and numbers <var>dx</var>, <var>dy</var>,
  <var>dirtyX</var>, <var>dirtyY</var>, <var>dirtyWidth</var>, and <var>dirtyHeight</var>:</p>

  <ol><li><p>Let <var>buffer</var> be <var>imageData</var>'s <code id=pixel-manipulation:dom-imagedata-data-2><a href=imagebitmap-and-animations.html#dom-imagedata-data>data</a></code> attribute value's [[ViewedArrayBuffer]] internal
   slot.<li><p>If <a id=pixel-manipulation:isdetachedbuffer href=https://tc39.es/ecma262/#sec-isdetachedbuffer data-x-internal=isdetachedbuffer>IsDetachedBuffer</a>(<var>buffer</var>) is true, then throw an
   <a id=pixel-manipulation:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=pixel-manipulation:domexception-7><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>
    <p>If <var>dirtyWidth</var> is negative, then let <var>dirtyX</var> be <span><var>dirtyX</var>+<var>dirtyWidth</var></span>, and let <var>dirtyWidth</var> be equal
    to the absolute magnitude of <var>dirtyWidth</var>.</p>

    <p>If <var>dirtyHeight</var> is negative, then let <var>dirtyY</var> be <span><var>dirtyY</var>+<var>dirtyHeight</var></span>, and let <var>dirtyHeight</var> be
    equal to the absolute magnitude of <var>dirtyHeight</var>.</p>
   <li>
    <p>If <var>dirtyX</var> is negative, then let <var>dirtyWidth</var> be <span><var>dirtyWidth</var>+<var>dirtyX</var></span>, and let <var>dirtyX</var> be 0.</p>

    <p>If <var>dirtyY</var> is negative, then let <var>dirtyHeight</var> be <span><var>dirtyHeight</var>+<var>dirtyY</var></span>, and let <var>dirtyY</var> be 0.</p>
   <li>
    <p>If <var>dirtyX</var>+<var>dirtyWidth</var> is greater than the <code id=pixel-manipulation:dom-imagedata-width-3><a href=imagebitmap-and-animations.html#dom-imagedata-width>width</a></code> attribute of the <var>imageData</var> argument, then
    let <var>dirtyWidth</var> be the value of that <code id=pixel-manipulation:dom-imagedata-width-4><a href=imagebitmap-and-animations.html#dom-imagedata-width>width</a></code>
    attribute, minus the value of <var>dirtyX</var>.</p>

    <p>If <var>dirtyY</var>+<var>dirtyHeight</var> is greater than the <code id=pixel-manipulation:dom-imagedata-height-3><a href=imagebitmap-and-animations.html#dom-imagedata-height>height</a></code> attribute of the <var>imageData</var> argument, then
    let <var>dirtyHeight</var> be the value of that <code id=pixel-manipulation:dom-imagedata-height-4><a href=imagebitmap-and-animations.html#dom-imagedata-height>height</a></code> attribute, minus the value of <var>dirtyY</var>.</p>
   <li>
    <p>If, after those changes, either <var>dirtyWidth</var> or <var>dirtyHeight</var> are negative
    or zero, then return without affecting any bitmaps.</p>
   <li><p>For all integer values of <var>x</var> and <var>y</var> where <span><var>dirtyX</var> ≤ <var>x</var> &lt; <span><var>dirtyX</var>+<var>dirtyWidth</var></span></span> and <span><var>dirtyY</var> ≤ <var>y</var> &lt; <span><var>dirtyY</var>+<var>dirtyHeight</var></span></span>,
   set the pixel with coordinate (<span><var>dx</var>+<var>x</var></span>,
   <var>dy</var>+<var>y</var>) in <var>bitmap</var> to the color of the pixel at coordinate
   (<var>x</var>, <var>y</var>) in the <var>imageData</var> data structure's
   <a href=imagebitmap-and-animations.html#concept-imagedata-bitmap-representation id=pixel-manipulation:concept-imagedata-bitmap-representation>bitmap</a>,
   converted from <var>imageData</var>'s <code id=pixel-manipulation:dom-imagedata-colorspace-3><a href=imagebitmap-and-animations.html#dom-imagedata-colorspace>colorSpace</a></code>
   to the <a href=#concept-canvas-color-space id=pixel-manipulation:concept-canvas-color-space-6>color space</a> of <var>bitmap</var>
   using <a id="pixel-manipulation:'relative-colorimetric'-2" href=https://drafts.csswg.org/css-color-5/#valdef-color-profile-rendering-intent-relative-colorimetric data-x-internal="'relative-colorimetric'">'relative-colorimetric'</a> rendering intent.</ol>

  <p class=note>Due to the lossy nature of converting between color spaces and converting to and
  from <a href=#concept-premultiplied-alpha id=pixel-manipulation:concept-premultiplied-alpha>premultiplied alpha</a> color values, pixels
  that have just been set using <code id=pixel-manipulation:dom-context-2d-putimagedata><a href=#dom-context-2d-putimagedata>putImageData()</a></code>,
  and are not completely opaque, might be returned to an equivalent <code id=pixel-manipulation:dom-context-2d-getimagedata><a href=#dom-context-2d-getimagedata>getImageData()</a></code> as different values.</p>

  <p>The current path, <a href=#transformations id=pixel-manipulation:transformations>transformation matrix</a>,
  <a href=#shadows id=pixel-manipulation:shadows-2>shadow attributes</a>, <a href=#concept-canvas-global-alpha id=pixel-manipulation:concept-canvas-global-alpha>global
  alpha</a>, the <a href=#clipping-region id=pixel-manipulation:clipping-region>clipping region</a>, and <a href=#current-compositing-and-blending-operator id=pixel-manipulation:current-compositing-and-blending-operator>current compositing and blending
  operator</a> must not affect the methods described in this section.</p>

  

  <div class=example>
   <p>In the following example, the script generates an <code id=pixel-manipulation:imagedata-9><a href=imagebitmap-and-animations.html#imagedata>ImageData</a></code> object so that it can
   draw onto it.</p>

   <pre><code class='js'><c- c1>// canvas is a reference to a &lt;canvas&gt; element</c->
<c- a>var</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->

<c- c1>// create a blank slate</c->
<c- a>var</c-> data <c- o>=</c-> context<c- p>.</c->createImageData<c- p>(</c->canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->

<c- c1>// create some plasma</c->
FillPlasma<c- p>(</c->data<c- p>,</c-> <c- t>&apos;green&apos;</c-><c- p>);</c-> <c- c1>// green plasma</c->

<c- c1>// add a cloud to the plasma</c->
AddCloud<c- p>(</c->data<c- p>,</c-> data<c- p>.</c->width<c- o>/</c-><c- mf>2</c-><c- p>,</c-> data<c- p>.</c->height<c- o>/</c-><c- mf>2</c-><c- p>);</c-> <c- c1>// put a cloud in the middle</c->

<c- c1>// paint the plasma+cloud on the canvas</c->
context<c- p>.</c->putImageData<c- p>(</c->data<c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->

<c- c1>// support methods</c->
<c- a>function</c-> FillPlasma<c- p>(</c->data<c- p>,</c-> color<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- a>function</c-> AddCloud<c- p>(</c->data<c- p>,</c-> x<c- p>,</c-> y<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c-></code></pre>
  </div>

  <div class=example>
   <p>Here is an example of using <code id=pixel-manipulation:dom-context-2d-getimagedata-2><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code id=pixel-manipulation:dom-context-2d-putimagedata-2><a href=#dom-context-2d-putimagedata>putImageData()</a></code> to implement an edge detection
   filter.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Edge detection demo<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
   <c- a>var</c-> image <c- o>=</c-> <c- k>new</c-> Image<c- p>();</c->
   <c- a>function</c-> init<c- p>()</c-> <c- p>{</c->
     image<c- p>.</c->onload <c- o>=</c-> demo<c- p>;</c->
     image<c- p>.</c->src <c- o>=</c-> <c- u>&quot;image.jpeg&quot;</c-><c- p>;</c->
   <c- p>}</c->
   <c- a>function</c-> demo<c- p>()</c-> <c- p>{</c->
     <c- a>var</c-> canvas <c- o>=</c-> document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>];</c->
     <c- a>var</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->

     <c- c1>// draw the image onto the canvas</c->
     context<c- p>.</c->drawImage<c- p>(</c->image<c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->

     <c- c1>// get the image data to manipulate</c->
     <c- a>var</c-> input <c- o>=</c-> context<c- p>.</c->getImageData<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->

     <c- c1>// get an empty slate to put the data into</c->
     <c- a>var</c-> output <c- o>=</c-> context<c- p>.</c->createImageData<c- p>(</c->canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->

     <c- c1>// alias some variables for convenience</c->
     <c- c1>// In this case input.width and input.height</c->
     <c- c1>// match canvas.width and canvas.height</c->
     <c- c1>// but we&apos;ll use the former to keep the code generic.</c->
     <c- a>var</c-> w <c- o>=</c-> input<c- p>.</c->width<c- p>,</c-> h <c- o>=</c-> input<c- p>.</c->height<c- p>;</c->
     <c- a>var</c-> inputData <c- o>=</c-> input<c- p>.</c->data<c- p>;</c->
     <c- a>var</c-> outputData <c- o>=</c-> output<c- p>.</c->data<c- p>;</c->

     <c- c1>// edge detection</c->
     <c- k>for</c-> <c- p>(</c-><c- a>var</c-> y <c- o>=</c-> <c- mf>1</c-><c- p>;</c-> y <c- o>&lt;</c-> h<c- o>-</c-><c- mf>1</c-><c- p>;</c-> y <c- o>+=</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c->
       <c- k>for</c-> <c- p>(</c-><c- a>var</c-> x <c- o>=</c-> <c- mf>1</c-><c- p>;</c-> x <c- o>&lt;</c-> w<c- o>-</c-><c- mf>1</c-><c- p>;</c-> x <c- o>+=</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c->
         <c- k>for</c-> <c- p>(</c-><c- a>var</c-> c <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> c <c- o>&lt;</c-> <c- mf>3</c-><c- p>;</c-> c <c- o>+=</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c->
           <c- a>var</c-> i <c- o>=</c-> <c- p>(</c->y<c- o>*</c->w <c- o>+</c-> x<c- p>)</c-><c- o>*</c-><c- mf>4</c-> <c- o>+</c-> c<c- p>;</c->
           outputData<c- p>[</c->i<c- p>]</c-> <c- o>=</c-> <c- mf>127</c-> <c- o>+</c-> <c- o>-</c->inputData<c- p>[</c->i <c- o>-</c-> w<c- o>*</c-><c- mf>4</c-> <c- o>-</c-> <c- mf>4</c-><c- p>]</c-> <c- o>-</c->   inputData<c- p>[</c->i <c- o>-</c-> w<c- o>*</c-><c- mf>4</c-><c- p>]</c-> <c- o>-</c-> inputData<c- p>[</c->i <c- o>-</c-> w<c- o>*</c-><c- mf>4</c-> <c- o>+</c-> <c- mf>4</c-><c- p>]</c-> <c- o>+</c->
                                 <c- o>-</c->inputData<c- p>[</c->i <c- o>-</c-> <c- mf>4</c-><c- p>]</c->       <c- o>+</c-> <c- mf>8</c-><c- o>*</c->inputData<c- p>[</c->i<c- p>]</c->       <c- o>-</c-> inputData<c- p>[</c->i <c- o>+</c-> <c- mf>4</c-><c- p>]</c-> <c- o>+</c->
                                 <c- o>-</c->inputData<c- p>[</c->i <c- o>+</c-> w<c- o>*</c-><c- mf>4</c-> <c- o>-</c-> <c- mf>4</c-><c- p>]</c-> <c- o>-</c->   inputData<c- p>[</c->i <c- o>+</c-> w<c- o>*</c-><c- mf>4</c-><c- p>]</c-> <c- o>-</c-> inputData<c- p>[</c->i <c- o>+</c-> w<c- o>*</c-><c- mf>4</c-> <c- o>+</c-> <c- mf>4</c-><c- p>];</c->
         <c- p>}</c->
         outputData<c- p>[(</c->y<c- o>*</c->w <c- o>+</c-> x<c- p>)</c-><c- o>*</c-><c- mf>4</c-> <c- o>+</c-> <c- mf>3</c-><c- p>]</c-> <c- o>=</c-> <c- mf>255</c-><c- p>;</c-> <c- c1>// alpha</c->
       <c- p>}</c->
     <c- p>}</c->

     <c- c1>// put the image data back after manipulation</c->
     context<c- p>.</c->putImageData<c- p>(</c->output<c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->
   <c- p>}</c->
  <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-> <c- e>onload</c-><c- o>=</c-><c- s>&quot;init()&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>canvas</c-><c- p>&gt;&lt;/</c-><c- f>canvas</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>Here is an example of color space conversion applied when drawing a solid color and
   reading the result back using and <code id=pixel-manipulation:dom-context-2d-getimagedata-3><a href=#dom-context-2d-getimagedata>getImageData()</a></code>.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Color space image data demo<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>canvas</c-><c- p>&gt;&lt;/</c-><c- f>canvas</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
<c- a>const</c-> canvas <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>);</c->
<c- a>const</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>,</c-> <c- p>{</c->colorSpace<c- o>:</c-><c- t>&apos;display-p3&apos;</c-><c- p>});</c->

<c- c1>// Draw a red rectangle. Note that the hex color notation</c->
<c- c1>// specifies sRGB colors.</c->
context<c- p>.</c->fillStyle <c- o>=</c-> <c- u>&quot;#FF0000&quot;</c-><c- p>;</c->
context<c- p>.</c->fillRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>64</c-><c- p>,</c-> <c- mf>64</c-><c- p>);</c->

<c- c1>// Get the image data.</c->
<c- a>const</c-> pixels <c- o>=</c-> context<c- p>.</c->getImageData<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>1</c-><c- p>,</c-> <c- mf>1</c-><c- p>);</c->

<c- c1>// This will print &apos;display-p3&apos;, reflecting the default behavior</c->
<c- c1>// of returning image data in the canvas&apos;s color space.</c->
console<c- p>.</c->log<c- p>(</c->pixels<c- p>.</c->colorSpace<c- p>);</c->

<c- c1>// This will print the values 234, 51, and 35, reflecting the</c->
<c- c1>// red fill color, converted to &apos;display-p3&apos;.</c->
console<c- p>.</c->log<c- p>(</c->pixels<c- p>.</c->data<c- p>[</c-><c- mf>0</c-><c- p>]);</c->
console<c- p>.</c->log<c- p>(</c->pixels<c- p>.</c->data<c- p>[</c-><c- mf>1</c-><c- p>]);</c->
console<c- p>.</c->log<c- p>(</c->pixels<c- p>.</c->data<c- p>[</c-><c- mf>2</c-><c- p>]);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>



  <h6 id=compositing><span class=secno>4.12.5.1.17</span> Compositing<a href=#compositing class=self-link></a></h6>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-globalalpha id=dom-context-2d-globalalpha-dev>globalAlpha</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha title="The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.">CanvasRenderingContext2D/globalAlpha</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current <a href=#concept-canvas-global-alpha id=compositing:concept-canvas-global-alpha>global alpha</a> value
    applied to rendering operations.</p>

    <p>Can be set, to change the <a href=#concept-canvas-global-alpha id=compositing:concept-canvas-global-alpha-2>global alpha</a>
    value. Values outside of the range 0.0 .. 1.0 are ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-globalcompositeoperation id=dom-context-2d-globalcompositeoperation-dev>globalCompositeOperation</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation title="The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes.">CanvasRenderingContext2D/globalCompositeOperation</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#current-compositing-and-blending-operator id=compositing:current-compositing-and-blending-operator>current compositing and blending operator</a>, from the values defined
    in <cite>Compositing and Blending</cite>. <a href=references.html#refsCOMPOSITE>[COMPOSITE]</a></p>

    <p>Can be set, to change the <a href=#current-compositing-and-blending-operator id=compositing:current-compositing-and-blending-operator-2>current compositing and blending operator</a>. Unknown
    values are ignored.</p>
   </dl>

  

  <p>Objects that implement the <code id=compositing:canvascompositing><a href=#canvascompositing>CanvasCompositing</a></code> interface have a <a href=#concept-canvas-global-alpha id=compositing:concept-canvas-global-alpha-3>global alpha</a> value and a <a href=#current-compositing-and-blending-operator id=compositing:current-compositing-and-blending-operator-3>current compositing
  and blending operator</a> value that both affect all the drawing operations on this
  object.</p>

  

  <p>The <dfn id=concept-canvas-global-alpha>global alpha</dfn> value gives an alpha value
  that is applied to shapes and images before they are composited onto the <a href=#output-bitmap id=compositing:output-bitmap>output bitmap</a>.
  The value ranges from 0.0 (fully transparent) to 1.0 (no additional transparency). It must
  initially have the value 1.0.</p>

  <p>The <dfn data-dfn-for=CanvasCompositing id=dom-context-2d-globalalpha data-dfn-type=attribute><code>globalAlpha</code></dfn> getter steps are to return
  <a id=compositing:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-global-alpha id=compositing:concept-canvas-global-alpha-4>global alpha</a>.</p>

  <p>The <code id=compositing:dom-context-2d-globalalpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> setter steps are:

  <ol><li><p>If the given value is either infinite, NaN, or not in the range 0.0 to 1.0, then
   return.<li><p>Otherwise, set <a id=compositing:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-global-alpha id=compositing:concept-canvas-global-alpha-5>global
   alpha</a> to the given value.</ol>

  <p>The <dfn id=current-compositing-and-blending-operator>current compositing and blending operator</dfn> value controls how shapes and images
  are drawn onto the <a href=#output-bitmap id=compositing:output-bitmap-2>output bitmap</a>, once they have had the <a href=#concept-canvas-global-alpha id=compositing:concept-canvas-global-alpha-6>global alpha</a> and the <a href=#current-transformation-matrix id=compositing:current-transformation-matrix>current transformation
  matrix</a> applied. Initially, it must be set to "<code id=compositing:gcop-source-over><a data-x-internal=gcop-source-over href=https://drafts.fxtf.org/compositing/#porterduffcompositingoperators_srcover>source-over</a></code>".</p>

  <p>The <dfn data-dfn-for=CanvasCompositing id=dom-context-2d-globalcompositeoperation data-dfn-type=attribute><code>globalCompositeOperation</code></dfn> getter
  steps are to return <a id=compositing:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#current-compositing-and-blending-operator id=compositing:current-compositing-and-blending-operator-4>current compositing and blending
  operator</a>.</p>

  <p>The <code id=compositing:dom-context-2d-globalcompositeoperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> setter steps
  are:</p>

  <ol><li><p>If the given value is not <a id=compositing:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> any of the values that the
   <a id=compositing:blend-mode href=https://drafts.fxtf.org/compositing/#ltblendmodegt data-x-internal=blend-mode>&lt;blend-mode></a> or the <a id=compositing:composite-mode href=https://drafts.fxtf.org/compositing/#compositemode data-x-internal=composite-mode>&lt;composite-mode></a> properties are defined
   to take, then return. <a href=references.html#refsCOMPOSITE>[COMPOSITE]</a><li><p>Otherwise, set <a id=compositing:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#current-compositing-and-blending-operator id=compositing:current-compositing-and-blending-operator-5>current compositing and blending operator</a>
   to the given value.</ol>

  


  <h6 id=image-smoothing><span class=secno>4.12.5.1.18</span> Image smoothing<a href=#image-smoothing class=self-link></a></h6>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-imagesmoothingenabled id=dom-context-2d-imagesmoothingenabled-dev>imageSmoothingEnabled</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled title="The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas API, determines whether scaled images are smoothed (true, default) or not (false). On getting the imageSmoothingEnabled property, the last value it was set to is returned.">CanvasRenderingContext2D/imageSmoothingEnabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>9.1+</span></span><span class="chrome yes"><span>Chrome</span><span>30+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>15+</span></span><span class="ie yes"><span>Internet Explorer</span><span title="Requires a prefix or alternative name.">🔰 11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns whether pattern fills and the <code id=image-smoothing:dom-context-2d-drawimage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method will attempt to smooth images if
    their pixels don't line up exactly with the display, when scaling images up.</p>

    <p>Can be set, to change whether images are smoothed (true) or not (false).</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-imagesmoothingquality id=dom-context-2d-imagesmoothingquality-dev>imageSmoothingQuality</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality title="The imageSmoothingQuality property of the CanvasRenderingContext2D interface, part of the Canvas API, lets you set the quality of image smoothing.">CanvasRenderingContext2D/imageSmoothingQuality</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari yes"><span>Safari</span><span>9.1+</span></span><span class="chrome yes"><span>Chrome</span><span>54+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the current image-smoothing-quality preference.</p>

    <p>Can be set, to change the preferred quality of image smoothing. The possible values are
    "<code id=image-smoothing:dom-context-2d-imagesmoothingquality-low><a href=#dom-context-2d-imagesmoothingquality-low>low</a></code>", "<code id=image-smoothing:dom-context-2d-imagesmoothingquality-medium><a href=#dom-context-2d-imagesmoothingquality-medium>medium</a></code>" and "<code id=image-smoothing:dom-context-2d-imagesmoothingquality-high><a href=#dom-context-2d-imagesmoothingquality-high>high</a></code>". Unknown values are ignored.</p>
   </dl>

  

  <p>Objects that implement the <code id=image-smoothing:canvasimagesmoothing><a href=#canvasimagesmoothing>CanvasImageSmoothing</a></code> interface have attributes that
  control how image smoothing is performed.</p>

  <p>The <dfn data-dfn-for=CanvasImageSmoothing id=dom-context-2d-imagesmoothingenabled data-dfn-type=attribute><code>imageSmoothingEnabled</code></dfn> attribute, on
  getting, must return the last value it was set to. On setting, it must be set to the new value.
  When the object implementing the <code id=image-smoothing:canvasimagesmoothing-2><a href=#canvasimagesmoothing>CanvasImageSmoothing</a></code> interface is created, the
  attribute must be set to true.</p>

  <p>The <dfn data-dfn-for=CanvasImageSmoothing id=dom-context-2d-imagesmoothingquality data-dfn-type=attribute><code>imageSmoothingQuality</code></dfn> attribute, on
  getting, must return the last value it was set to. On setting, it must be set to the new value.
  When the object implementing the <code id=image-smoothing:canvasimagesmoothing-3><a href=#canvasimagesmoothing>CanvasImageSmoothing</a></code> interface is created, the
  attribute must be set to "<code id=image-smoothing:dom-context-2d-imagesmoothingquality-low-2><a href=#dom-context-2d-imagesmoothingquality-low>low</a></code>".</p>

  


  <h6 id=shadows><span class=secno>4.12.5.1.19</span> <dfn>Shadows</dfn><a href=#shadows class=self-link></a></h6>

  <p>All drawing operations on an object which implements the <code id=shadows:canvasshadowstyles><a href=#canvasshadowstyles>CanvasShadowStyles</a></code>
  interface are affected by the four global shadow attributes.</p>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-shadowcolor id=dom-context-2d-shadowcolor-dev>shadowColor</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor title="The CanvasRenderingContext2D.shadowColor property of the Canvas 2D API specifies the color of shadows.">CanvasRenderingContext2D/shadowColor</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current shadow color.</p>

    <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are
    ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-shadowoffsetx id=dom-context-2d-shadowoffsetx-dev>shadowOffsetX</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX title="The CanvasRenderingContext2D.shadowOffsetX property of the Canvas 2D API specifies the distance that shadows will be offset horizontally.">CanvasRenderingContext2D/shadowOffsetX</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>context</var>.<a href=#dom-context-2d-shadowoffsety id=dom-context-2d-shadowoffsety-dev>shadowOffsetY</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY title="The CanvasRenderingContext2D.shadowOffsetY property of the Canvas 2D API specifies the distance that shadows will be offset vertically.">CanvasRenderingContext2D/shadowOffsetY</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current shadow offset.</p>

    <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
   <dt><code><var>context</var>.<a href=#dom-context-2d-shadowblur id=dom-context-2d-shadowblur-dev>shadowBlur</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur title="The CanvasRenderingContext2D.shadowBlur property of the Canvas 2D API specifies the amount of blur applied to shadows. The default is 0 (no blur).">CanvasRenderingContext2D/shadowBlur</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current level of blur applied to shadows.</p>

    <p>Can be set, to change the blur level. Values that are not finite numbers greater than or
    equal to zero are ignored.</p>
   </dl>

  

  <p>Objects which implement the <code id=shadows:canvasshadowstyles-2><a href=#canvasshadowstyles>CanvasShadowStyles</a></code> interface have an associated <dfn id=concept-canvasshadowstyles-shadow-color>shadow color</dfn>, which is a CSS color.
  Initially, it must be <a id=shadows:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.</p>

  <p>The <dfn data-dfn-for=CanvasShadowStyles id=dom-context-2d-shadowcolor data-dfn-type=attribute><code>shadowColor</code></dfn> getter steps are to return the <a href=https://drafts.csswg.org/css-color/#serializing-color-values id=shadows:serialisation-of-a-color data-x-internal=serialisation-of-a-color>serialization</a> of <a id=shadows:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasshadowstyles-shadow-color id=shadows:concept-canvasshadowstyles-shadow-color>shadow color</a> with <a href=https://drafts.csswg.org/css-color/#color-serialization-html-compatible-serialization-is-requested id=shadows:html-compatible-serialization-is-requested data-x-internal=html-compatible-serialization-is-requested>HTML-compatible serialization
  requested</a>.</p>

  <p>The <code id=shadows:dom-context-2d-shadowcolor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> setter steps are:</p>

  <ol><li><p>Let <var>context</var> be <a id=shadows:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=shadows:dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute's value, if that is an element; otherwise
   null.<li><p>Let <var>parsedValue</var> be the result of <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id=shadows:parsed-as-a-css-color-value data-x-internal=parsed-as-a-css-color-value>parsing</a> the given value with <var>context</var> if non-null.<li><p>If <var>parsedValue</var> is failure, then return.<li><p>Set <a id=shadows:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvasshadowstyles-shadow-color id=shadows:concept-canvasshadowstyles-shadow-color-2>shadow
   color</a> to <var>parsedValue</var>.</ol>

  <p>The <dfn data-dfn-for=CanvasShadowStyles id=dom-context-2d-shadowoffsetx data-dfn-type=attribute><code>shadowOffsetX</code></dfn> and <dfn data-dfn-for=CanvasShadowStyles id=dom-context-2d-shadowoffsety data-dfn-type=attribute><code>shadowOffsetY</code></dfn>
  attributes specify the distance that the shadow will be offset in the positive horizontal and
  positive vertical distance respectively. Their values are in coordinate space units. They are not
  affected by the current transformation matrix.</p>

  <p>When the context is created, the shadow offset attributes must initially have the value
  0.</p>

  <p>On getting, they must return their current value. On setting, the attribute being set must be
  set to the new value, except if the value is infinite or NaN, in which case the new value must be
  ignored.</p>

  <p>The <dfn data-dfn-for=CanvasShadowStyles id=dom-context-2d-shadowblur data-dfn-type=attribute><code>shadowBlur</code></dfn> attribute specifies the level of the
  blurring effect. (The units do not map to coordinate space units, and are not affected by the
  current transformation matrix.)</p>

  <p>When the context is created, the <code id=shadows:dom-context-2d-shadowblur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>
  attribute must initially have the value 0.</p>

  <p>On getting, the attribute must return its current value. On setting, the attribute must be set
  to the new value, except if the value is negative, infinite or NaN, in which case the new value
  must be ignored.</p>

  <p><dfn id=when-shadows-are-drawn>Shadows are only drawn if</dfn> the opacity component of
  the alpha component of the <a href=#concept-canvasshadowstyles-shadow-color id=shadows:concept-canvasshadowstyles-shadow-color-3>shadow
  color</a> is nonzero and either the <code id=shadows:dom-context-2d-shadowblur-2><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>
  is nonzero, or the <code id=shadows:dom-context-2d-shadowoffsetx><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> is nonzero, or
  the <code id=shadows:dom-context-2d-shadowoffsety><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> is nonzero.</p>

  <p><a href=#when-shadows-are-drawn id=shadows:when-shadows-are-drawn>When shadows are drawn</a>, they must be rendered as follows:</p>

  <ol><li><p>Let <var>A</var> be an infinite <a id=shadows:transparent-black-2 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> bitmap on which the source
   image for which a shadow is being created has been rendered.<li><p>Let <var>B</var> be an infinite <a id=shadows:transparent-black-3 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> bitmap, with a coordinate
   space and an origin identical to <var>A</var>.<li><p>Copy the alpha component of <var>A</var> to <var>B</var>, offset by <code id=shadows:dom-context-2d-shadowoffsetx-2><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> in the positive <var>x</var>
   direction, and <code id=shadows:dom-context-2d-shadowoffsety-2><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> in the positive
   <var>y</var> direction.<li>
    <p>If <code id=shadows:dom-context-2d-shadowblur-3><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is greater than 0:</p>

    <ol><li><p>Let <var>σ</var> be half the value of <code id=shadows:dom-context-2d-shadowblur-4><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>.<li><p>Perform a 2D Gaussian Blur on <var>B</var>, using <var>σ</var>
     as the standard deviation.</p>  </ol>

    <p>User agents may limit values of <var>σ</var> to an implementation-specific
    maximum value to avoid exceeding hardware limitations during the Gaussian blur operation.</p>
   <li><p>Set the red, green, and blue components of every pixel in <var>B</var> to the
   red, green, and blue components (respectively) of the <a href=#concept-canvasshadowstyles-shadow-color id=shadows:concept-canvasshadowstyles-shadow-color-4>shadow color</a>.<li><p>Multiply the alpha component of every pixel in <var>B</var> by the alpha
   component of the <a href=#concept-canvasshadowstyles-shadow-color id=shadows:concept-canvasshadowstyles-shadow-color-5>shadow
   color</a>.<li><p>The shadow is in the bitmap <var>B</var>, and is rendered as part of the
   <a href=#drawing-model id=shadows:drawing-model>drawing model</a> described below.</ol>

  

  <p>If the <a href=#current-compositing-and-blending-operator id=shadows:current-compositing-and-blending-operator>current compositing and blending operator</a> is "<code id=shadows:gcop-copy><a data-x-internal=gcop-copy href=https://drafts.fxtf.org/compositing/#porterduffcompositingoperators_src>copy</a></code>", then shadows effectively won't render (since the shape will
  overwrite the shadow).</p>

  <h6 id=filters><span class=secno>4.12.5.1.20</span> Filters<a href=#filters class=self-link></a></h6>

  <p>All drawing operations on an object which implements the <code id=filters:canvasfilters><a href=#canvasfilters>CanvasFilters</a></code>
  interface are affected by the global <dfn data-dfn-for=CanvasFilters id=dom-context-2d-filter data-dfn-type=attribute><code>filter</code></dfn> attribute.</p>

  <dl class=domintro><dt><code><var>context</var>.<a href=#dom-context-2d-filter id=dom-context-2d-filter-dev>filter</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter title="The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.">CanvasRenderingContext2D/filter</a><div class=support><span class="firefox yes"><span>Firefox</span><span>49+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>52+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the current filter.</p>


    <p>Can be set, to change the filter. Values can either be the string "<code>none</code>" or a string parseable as a <a id=filters:filter-value-list href=https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list data-x-internal=filter-value-list>&lt;filter-value-list></a>. Other
    values are ignored.</p>
   </dl>

  

  <p>Such objects have an associated <dfn id=concept-canvas-current-filter>current
  filter</dfn>, which is a string. Initially the <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter>current filter</a> is set to the string "<code>none</code>". Whenever the value of the <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-2>current filter</a> is the string "<code>none</code>" filters will be disabled for the context.</p>

  <p>The <code id=filters:dom-context-2d-filter><a href=#dom-context-2d-filter>filter</a></code> getter steps are to return
  <a id=filters:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-3>current filter</a>.</p>

  <p>The <code id=filters:dom-context-2d-filter-2><a href=#dom-context-2d-filter>filter</a></code> setter steps are:</p>

  <ol><li><p>If the given value is "<code>none</code>", then set <a id=filters:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-4>current filter</a> to "<code>none</code>"
   and return.<li><p>Let <var>parsedValue</var> be the result of <a href=https://drafts.csswg.org/css-syntax/#parse-grammar id=filters:parse-something-according-to-a-css-grammar data-x-internal=parse-something-according-to-a-css-grammar>parsing</a> the given values as a <a id=filters:filter-value-list-2 href=https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list data-x-internal=filter-value-list>&lt;filter-value-list></a>. If any
   property-independent style sheet syntax like 'inherit' or 'initial' is present, then this
   parsing must return failure.<li><p>If <var>parsedValue</var> is failure, then return.<li><p>Set <a id=filters:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-5>current
   filter</a> to the given value.</ol>

  

  <p class=note>Though <code><var>context</var>.<code id=filters:dom-context-2d-filter-3><a href=#dom-context-2d-filter>filter</a></code> = "<code>none</code>"</code> will disable
  filters for the context, <code><var>context</var>.<code id=filters:dom-context-2d-filter-4><a href=#dom-context-2d-filter>filter</a></code> = ""</code>, <code><var>context</var>.<code id=filters:dom-context-2d-filter-5><a href=#dom-context-2d-filter>filter</a></code> = null</code>,
  and <code><var>context</var>.<code id=filters:dom-context-2d-filter-6><a href=#dom-context-2d-filter>filter</a></code> =
  undefined</code> are all treated as unparseable inputs and the value of the <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-6>current filter</a> is left unchanged.</p>

  <p>Coordinates used in the value of the <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-7>current
  filter</a> are interpreted such that one pixel is equivalent to one SVG user space unit and to
  one canvas coordinate space unit. Filter coordinates are not affected by the <a href=#transformations id=filters:transformations>current transformation matrix</a>. The current
  transformation matrix affects only the input to the filter. Filters are applied in the
  <a href=#output-bitmap id=filters:output-bitmap>output bitmap</a>'s coordinate space.</p>

  

  <p>When the value of the <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-8>current filter</a> is a
  string parsable as a <a id=filters:filter-value-list-3 href=https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list data-x-internal=filter-value-list>&lt;filter-value-list></a> which defines lengths using
  percentages or using <a id="filters:'em'" href=https://drafts.csswg.org/css-values/#em data-x-internal="'em'">'em'</a> or <a id="filters:'ex'" href=https://drafts.csswg.org/css-values/#ex data-x-internal="'ex'">'ex'</a> units, these must be interpreted
  relative to the <a id=filters:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of the <a id="filters:'font-size'" href=https://drafts.csswg.org/css-fonts/#font-size-prop data-x-internal="'font-size'">'font-size'</a> property of the
  <a href=#font-style-source-object id=filters:font-style-source-object>font style source object</a> at the time that the attribute is set. If the <a href=https://drafts.csswg.org/css-cascade/#computed-value id=filters:computed-value-2 data-x-internal=computed-value>computed values</a> are undefined for a particular case (e.g. because
  the <a href=#font-style-source-object id=filters:font-style-source-object-2>font style source object</a> is not an element or is not <a id=filters:being-rendered href=rendering.html#being-rendered>being
  rendered</a>), then the relative keywords must be interpreted relative to the default value of
  the <code id=filters:dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute. The 'larger' and 'smaller' keywords
  are not supported.</p>

  <p>If the value of the <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-9>current filter</a> is a
  string parseable as a <a id=filters:filter-value-list-4 href=https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list data-x-internal=filter-value-list>&lt;filter-value-list></a> with a reference to an SVG filter in
  the same document, and this SVG filter changes, then the changed filter is used for the next draw
  operation.</p>

  <p>If the value of the <a href=#concept-canvas-current-filter id=filters:concept-canvas-current-filter-10>current filter</a> is a
  string parseable as a <a id=filters:filter-value-list-5 href=https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list data-x-internal=filter-value-list>&lt;filter-value-list></a> with a reference to an SVG filter in
  an external resource document and that document is not loaded when a drawing operation is
  invoked, then the drawing operation must proceed with no filtering.</p>

  

  <h6 id=working-with-externally-defined-svg-filters><span class=secno>4.12.5.1.21</span> Working with externally-defined SVG filters<a href=#working-with-externally-defined-svg-filters class=self-link></a></h6>

  <p><i>This section is non-normative.</i></p>

  <p>Since drawing is performed using filter value "<code>none</code>" until an
  externally-defined filter has finished loading, authors might wish to determine whether such a
  filter has finished loading before proceeding with a drawing operation. One way to accomplish
  this is to load the externally-defined filter elsewhere within the same page in some element that
  sends a <code>load</code> event (for example, an <a id=working-with-externally-defined-svg-filters:svg-use href=https://svgwg.org/svg2-draft/struct.html#UseElement data-x-internal=svg-use>SVG <code>use</code></a>
  element), and wait for the <code>load</code> event to be dispatched.</p>

  

  <h6 id=drawing-model><span class=secno>4.12.5.1.22</span> <dfn>Drawing model</dfn><a href=#drawing-model class=self-link></a></h6>

  <p>When a shape or image is painted, user agents must follow these steps, in the order given (or
  act as if they do):</p>

  <ol><li><p>Render the shape or image onto an infinite <a id=drawing-model:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> bitmap, creating
   image <var>A</var>, as described in the previous sections. For shapes, the current fill, stroke,
   and line styles must be honored, and the stroke must itself also be subjected to the current
   transformation matrix.<li><p>Multiply the alpha component of every pixel in <var>A</var> by <code id=drawing-model:concept-canvas-global-alpha><a href=#concept-canvas-global-alpha>global alpha</a></code>.<li>
    <p>When the <a href=#concept-canvas-current-filter id=drawing-model:concept-canvas-current-filter>current filter</a> is set to a
    value other than "<code>none</code>" and all the externally-defined filters it
    references, if any, are in documents that are currently loaded, then use image <var>A</var> as
    the input to the <a href=#concept-canvas-current-filter id=drawing-model:concept-canvas-current-filter-2>current filter</a>, creating
    image <var>B</var>. If the <a href=#concept-canvas-current-filter id=drawing-model:concept-canvas-current-filter-3>current filter</a>
    is a string parseable as a <a id=drawing-model:filter-value-list href=https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list data-x-internal=filter-value-list>&lt;filter-value-list></a>, then draw using the <a href=#concept-canvas-current-filter id=drawing-model:concept-canvas-current-filter-4>current filter</a> in the same manner as SVG.</p>

    <p>Otherwise, let <var>B</var> be an alias for <var>A</var>.</p>
   <li><p><a href=#when-shadows-are-drawn id=drawing-model:when-shadows-are-drawn>When shadows are drawn</a>, render the shadow from image <var>B</var>,
   using the current shadow styles, creating image <var>C</var>.<li><p><a href=#when-shadows-are-drawn id=drawing-model:when-shadows-are-drawn-2>When shadows are drawn</a>, composite <var>C</var> within the
   <a href=#clipping-region id=drawing-model:clipping-region>clipping region</a> over the current <a href=#output-bitmap id=drawing-model:output-bitmap>output bitmap</a> using the <a href=#current-compositing-and-blending-operator id=drawing-model:current-compositing-and-blending-operator>current
   compositing and blending operator</a>.<li><p>Composite <var>B</var> within the <a href=#clipping-region id=drawing-model:clipping-region-2>clipping region</a> over the current
   <a href=#output-bitmap id=drawing-model:output-bitmap-2>output bitmap</a> using the <a href=#current-compositing-and-blending-operator id=drawing-model:current-compositing-and-blending-operator-2>current compositing and blending
   operator</a>.</ol>

  <p>When compositing onto the <a href=#output-bitmap id=drawing-model:output-bitmap-3>output bitmap</a>, pixels that would fall outside of the
  <a href=#output-bitmap id=drawing-model:output-bitmap-4>output bitmap</a> must be discarded.</p>

  




  <h6 id=best-practices><span class=secno>4.12.5.1.23</span> Best practices<a href=#best-practices class=self-link></a></h6>

  <p>When a canvas is interactive, authors should include <a id=best-practices:focusable href=interaction.html#focusable>focusable</a> elements in the
  element's fallback content corresponding to each <a id=best-practices:focusable-2 href=interaction.html#focusable>focusable</a> part of the canvas, as in
  the <a href=#drawCustomFocusRingExample>example above</a>.</p>

  <p>When rendering focus rings, to ensure that focus rings have the appearance of native focus
  rings, authors should use the <code id=best-practices:dom-context-2d-drawfocusifneeded><a href=#dom-context-2d-drawfocusifneeded>drawFocusIfNeeded()</a></code> method, passing it the
  element for which a ring is being drawn. This method only draws the focus ring if the element is
  <a id=best-practices:focused href=interaction.html#focused>focused</a>, so that it can simply be called whenever drawing the element, without
  checking whether the element is focused or not first.</p>

  <p id=no-text-editing-in-canvas-please>Authors should avoid implementing text editing controls
  using the <code id=best-practices:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element. Doing so has a large number of disadvantages:</p>

  <ul><li>Mouse placement of the caret has to be reimplemented.<li>Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline
   text input).<li>Scrolling of the text control has to be implemented (horizontally for long lines, vertically
   for multiline input).<li>Native features such as copy-and-paste have to be reimplemented.<li>Native features such as spell-checking have to be reimplemented.<li>Native features such as drag-and-drop have to be reimplemented.<li>Native features such as page-wide text search have to be reimplemented.<li>Native features specific to the user, for example custom text services, have to be
   reimplemented. This is close to impossible since each user might have different services
   installed, and there is an unbounded set of possible such services.<li>Bidirectional text editing has to be reimplemented.<li>For multiline text editing, line wrapping has to be implemented for all relevant
   languages.<li>Text selection has to be reimplemented.<li>Dragging of bidirectional text selections has to be reimplemented.<li>Platform-native keyboard shortcuts have to be reimplemented.<li>Platform-native input method editors (IMEs) have to be reimplemented.<li>Undo and redo functionality has to be reimplemented.<li>Accessibility features such as magnification following the caret or selection have to be
   reimplemented.</ul>

  <p>This is a huge amount of work, and authors are most strongly encouraged to avoid doing any of
  it by instead using the <code id=best-practices:the-input-element><a href=input.html#the-input-element>input</a></code> element, the <code id=best-practices:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element, or the
  <code id=best-practices:attr-contenteditable><a href=interaction.html#attr-contenteditable>contenteditable</a></code> attribute.</p>


  <h6 id=examples><span class=secno>4.12.5.1.24</span> Examples<a href=#examples class=self-link></a></h6>

  <p><i>This section is non-normative.</i></p>

  <div class=example>

  <p>Here is an example of a script that uses canvas to draw <a href="data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUw%2BDQo8aHRtbCBsYW5nPSJlbiI%2BDQogPGhlYWQ%2BDQogIDx0aXRsZT5QcmV0dHkgR2xvd2luZyBMaW5lczwvdGl0bGU%2BDQogPC9oZWFkPg0KIDxib2R5Pg0KPGNhbnZhcyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQ1MCI%2BPC9jYW52YXM%2BDQo8c2NyaXB0Pg0KDQogdmFyIGNvbnRleHQgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnY2FudmFzJylbMF0uZ2V0Q29udGV4dCgnMmQnKTsNCg0KIHZhciBsYXN0WCA9IGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKTsNCiB2YXIgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KIHZhciBodWUgPSAwOw0KIGZ1bmN0aW9uIGxpbmUoKSB7DQogICBjb250ZXh0LnNhdmUoKTsNCiAgIGNvbnRleHQudHJhbnNsYXRlKGNvbnRleHQuY2FudmFzLndpZHRoLzIsIGNvbnRleHQuY2FudmFzLmhlaWdodC8yKTsNCiAgIGNvbnRleHQuc2NhbGUoMC45LCAwLjkpOw0KICAgY29udGV4dC50cmFuc2xhdGUoLWNvbnRleHQuY2FudmFzLndpZHRoLzIsIC1jb250ZXh0LmNhbnZhcy5oZWlnaHQvMik7DQogICBjb250ZXh0LmJlZ2luUGF0aCgpOw0KICAgY29udGV4dC5saW5lV2lkdGggPSA1ICsgTWF0aC5yYW5kb20oKSAqIDEwOw0KICAgY29udGV4dC5tb3ZlVG8obGFzdFgsIGxhc3RZKTsNCiAgIGxhc3RYID0gY29udGV4dC5jYW52YXMud2lkdGggKiBNYXRoLnJhbmRvbSgpOw0KICAgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KICAgY29udGV4dC5iZXppZXJDdXJ2ZVRvKGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGxhc3RYLCBsYXN0WSk7DQoNCiAgIGh1ZSA9IGh1ZSArIDEwICogTWF0aC5yYW5kb20oKTsNCiAgIGNvbnRleHQuc3Ryb2tlU3R5bGUgPSAnaHNsKCcgKyBodWUgKyAnLCA1MCUsIDUwJSknOw0KICAgY29udGV4dC5zaGFkb3dDb2xvciA9ICd3aGl0ZSc7DQogICBjb250ZXh0LnNoYWRvd0JsdXIgPSAxMDsNCiAgIGNvbnRleHQuc3Ryb2tlKCk7DQogICBjb250ZXh0LnJlc3RvcmUoKTsNCiB9DQogc2V0SW50ZXJ2YWwobGluZSwgNTApOw0KDQogZnVuY3Rpb24gYmxhbmsoKSB7DQogICBjb250ZXh0LmZpbGxTdHlsZSA9ICdyZ2JhKDAsMCwwLDAuMSknOw0KICAgY29udGV4dC5maWxsUmVjdCgwLCAwLCBjb250ZXh0LmNhbnZhcy53aWR0aCwgY29udGV4dC5jYW52YXMuaGVpZ2h0KTsNCiB9DQogc2V0SW50ZXJ2YWwoYmxhbmssIDQwKTsNCg0KPC9zY3JpcHQ%2BDQogPC9ib2R5Pg0KPC9odG1sPg0K">pretty glowing lines</a>.</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>canvas</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;800&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;450&quot;</c-><c- p>&gt;&lt;/</c-><c- f>canvas</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->

 <c- a>var</c-> context <c- o>=</c-> document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->

 <c- a>var</c-> lastX <c- o>=</c-> context<c- p>.</c->canvas<c- p>.</c->width <c- o>*</c-> Math<c- p>.</c->random<c- p>();</c->
 <c- a>var</c-> lastY <c- o>=</c-> context<c- p>.</c->canvas<c- p>.</c->height <c- o>*</c-> Math<c- p>.</c->random<c- p>();</c->
 <c- a>var</c-> hue <c- o>=</c-> <c- mf>0</c-><c- p>;</c->
 <c- a>function</c-> line<c- p>()</c-> <c- p>{</c->
   context<c- p>.</c->save<c- p>();</c->
   context<c- p>.</c->translate<c- p>(</c->context<c- p>.</c->canvas<c- p>.</c->width<c- o>/</c-><c- mf>2</c-><c- p>,</c-> context<c- p>.</c->canvas<c- p>.</c->height<c- o>/</c-><c- mf>2</c-><c- p>);</c->
   context<c- p>.</c->scale<c- p>(</c-><c- mf>0.9</c-><c- p>,</c-> <c- mf>0.9</c-><c- p>);</c->
   context<c- p>.</c->translate<c- p>(</c-><c- o>-</c->context<c- p>.</c->canvas<c- p>.</c->width<c- o>/</c-><c- mf>2</c-><c- p>,</c-> <c- o>-</c->context<c- p>.</c->canvas<c- p>.</c->height<c- o>/</c-><c- mf>2</c-><c- p>);</c->
   context<c- p>.</c->beginPath<c- p>();</c->
   context<c- p>.</c->lineWidth <c- o>=</c-> <c- mf>5</c-> <c- o>+</c-> Math<c- p>.</c->random<c- p>()</c-> <c- o>*</c-> <c- mf>10</c-><c- p>;</c->
   context<c- p>.</c->moveTo<c- p>(</c->lastX<c- p>,</c-> lastY<c- p>);</c->
   lastX <c- o>=</c-> context<c- p>.</c->canvas<c- p>.</c->width <c- o>*</c-> Math<c- p>.</c->random<c- p>();</c->
   lastY <c- o>=</c-> context<c- p>.</c->canvas<c- p>.</c->height <c- o>*</c-> Math<c- p>.</c->random<c- p>();</c->
   context<c- p>.</c->bezierCurveTo<c- p>(</c->context<c- p>.</c->canvas<c- p>.</c->width <c- o>*</c-> Math<c- p>.</c->random<c- p>(),</c->
                         context<c- p>.</c->canvas<c- p>.</c->height <c- o>*</c-> Math<c- p>.</c->random<c- p>(),</c->
                         context<c- p>.</c->canvas<c- p>.</c->width <c- o>*</c-> Math<c- p>.</c->random<c- p>(),</c->
                         context<c- p>.</c->canvas<c- p>.</c->height <c- o>*</c-> Math<c- p>.</c->random<c- p>(),</c->
                         lastX<c- p>,</c-> lastY<c- p>);</c->

   hue <c- o>=</c-> hue <c- o>+</c-> <c- mf>10</c-> <c- o>*</c-> Math<c- p>.</c->random<c- p>();</c->
   context<c- p>.</c->strokeStyle <c- o>=</c-> <c- t>&apos;hsl(&apos;</c-> <c- o>+</c-> hue <c- o>+</c-> <c- t>&apos;, 50%, 50%)&apos;</c-><c- p>;</c->
   context<c- p>.</c->shadowColor <c- o>=</c-> <c- t>&apos;white&apos;</c-><c- p>;</c->
   context<c- p>.</c->shadowBlur <c- o>=</c-> <c- mf>10</c-><c- p>;</c->
   context<c- p>.</c->stroke<c- p>();</c->
   context<c- p>.</c->restore<c- p>();</c->
 <c- p>}</c->
 setInterval<c- p>(</c->line<c- p>,</c-> <c- mf>50</c-><c- p>);</c->

 <c- a>function</c-> blank<c- p>()</c-> <c- p>{</c->
   context<c- p>.</c->fillStyle <c- o>=</c-> <c- t>&apos;rgba(0,0,0,0.1)&apos;</c-><c- p>;</c->
   context<c- p>.</c->fillRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> context<c- p>.</c->canvas<c- p>.</c->width<c- p>,</c-> context<c- p>.</c->canvas<c- p>.</c->height<c- p>);</c->
 <c- p>}</c->
 setInterval<c- p>(</c->blank<c- p>,</c-> <c- mf>40</c-><c- p>);</c->

<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The 2D rendering context for <code id=examples:the-canvas-element><a href=#the-canvas-element>canvas</a></code> is often used for sprite-based games. The
   following example demonstrates this:</p>

   <iframe src=../demos/canvas/blue-robot/index-idle.html width=396 height=216></iframe>

   <p>Here is the source for this example:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>meta</c-> <c- e>charset</c-><c- o>=</c-><c- s>&quot;utf-8&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Blue Robot Demo<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
  <c- f>html</c-> <c- p>{</c-> <c- k>overflow</c-><c- p>:</c-> <c- kc>hidden</c-><c- p>;</c-> <c- k>min-height</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c-> <c- k>min-width</c-><c- p>:</c-> <c- mi>380</c-><c- b>px</c-><c- p>;</c-> <c- p>}</c->
  <c- f>body</c-> <c- p>{</c-> <c- k>height</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c-> <c- k>position</c-><c- p>:</c-> <c- kc>relative</c-><c- p>;</c-> <c- k>margin</c-><c- p>:</c-> <c- mi>8</c-><c- b>px</c-><c- p>;</c-> <c- p>}</c->
  <c- p>.</c-><c- nc>buttons</c-> <c- p>{</c-> <c- k>position</c-><c- p>:</c-> <c- kc>absolute</c-><c- p>;</c-> <c- k>bottom</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c-> <c- k>left</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c-> <c- k>margin</c-><c- p>:</c-> <c- mi>4</c-><c- b>px</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>canvas</c-> <c- e>width</c-><c- o>=</c-><c- s>&quot;380&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;200&quot;</c-><c- p>&gt;&lt;/</c-><c- f>canvas</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> Landscape <c- o>=</c-> <c- a>function</c-> <c- p>(</c->context<c- p>,</c-> width<c- p>,</c-> height<c- p>)</c-> <c- p>{</c->
   <c- k>this</c-><c- p>.</c->offset <c- o>=</c-> <c- mf>0</c-><c- p>;</c->
   <c- k>this</c-><c- p>.</c->width <c- o>=</c-> width<c- p>;</c->
   <c- k>this</c-><c- p>.</c->advance <c- o>=</c-> <c- a>function</c-> <c- p>(</c->dx<c- p>)</c-> <c- p>{</c->
     <c- k>this</c-><c- p>.</c->offset <c- o>+=</c-> dx<c- p>;</c->
   <c- p>};</c->
   <c- k>this</c-><c- p>.</c->horizon <c- o>=</c-> height <c- o>*</c-> <c- mf>0.7</c-><c- p>;</c->
   <c- c1>// This creates the sky gradient (from a darker blue to white at the bottom)</c->
   <c- k>this</c-><c- p>.</c->sky <c- o>=</c-> context<c- p>.</c->createLinearGradient<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- k>this</c-><c- p>.</c->horizon<c- p>);</c->
   <c- k>this</c-><c- p>.</c->sky<c- p>.</c->addColorStop<c- p>(</c-><c- mf>0.0</c-><c- p>,</c-> <c- t>&apos;rgb(55,121,179)&apos;</c-><c- p>);</c->
   <c- k>this</c-><c- p>.</c->sky<c- p>.</c->addColorStop<c- p>(</c-><c- mf>0.7</c-><c- p>,</c-> <c- t>&apos;rgb(121,194,245)&apos;</c-><c- p>);</c->
   <c- k>this</c-><c- p>.</c->sky<c- p>.</c->addColorStop<c- p>(</c-><c- mf>1.0</c-><c- p>,</c-> <c- t>&apos;rgb(164,200,214)&apos;</c-><c- p>);</c->
   <c- c1>// this creates the grass gradient (from a darker green to a lighter green)</c->
   <c- k>this</c-><c- p>.</c->earth <c- o>=</c-> context<c- p>.</c->createLinearGradient<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- k>this</c-><c- p>.</c->horizon<c- p>,</c-> <c- mf>0</c-><c- p>,</c-> height<c- p>);</c->
   <c- k>this</c-><c- p>.</c->earth<c- p>.</c->addColorStop<c- p>(</c-><c- mf>0.0</c-><c- p>,</c-> <c- t>&apos;rgb(81,140,20)&apos;</c-><c- p>);</c->
   <c- k>this</c-><c- p>.</c->earth<c- p>.</c->addColorStop<c- p>(</c-><c- mf>1.0</c-><c- p>,</c-> <c- t>&apos;rgb(123,177,57)&apos;</c-><c- p>);</c->
   <c- k>this</c-><c- p>.</c->paintBackground <c- o>=</c-> <c- a>function</c-> <c- p>(</c->context<c- p>,</c-> width<c- p>,</c-> height<c- p>)</c-> <c- p>{</c->
     <c- c1>// first, paint the sky and grass rectangles</c->
     context<c- p>.</c->fillStyle <c- o>=</c-> <c- k>this</c-><c- p>.</c->sky<c- p>;</c->
     context<c- p>.</c->fillRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> width<c- p>,</c-> <c- k>this</c-><c- p>.</c->horizon<c- p>);</c->
     context<c- p>.</c->fillStyle <c- o>=</c-> <c- k>this</c-><c- p>.</c->earth<c- p>;</c->
     context<c- p>.</c->fillRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- k>this</c-><c- p>.</c->horizon<c- p>,</c-> width<c- p>,</c-> height<c- o>-</c-><c- k>this</c-><c- p>.</c->horizon<c- p>);</c->
     <c- c1>// then, draw the cloudy banner</c->
     <c- c1>// we make it cloudy by having the draw text off the top of the</c->
     <c- c1>// canvas, and just having the blurred shadow shown on the canvas</c->
     context<c- p>.</c->save<c- p>();</c->
     context<c- p>.</c->translate<c- p>(</c->width<c- o>-</c-><c- p>((</c-><c- k>this</c-><c- p>.</c->offset<c- o>+</c-><c- p>(</c-><c- k>this</c-><c- p>.</c->width<c- o>*</c-><c- mf>3.2</c-><c- p>))</c-> <c- o>%</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->width<c- o>*</c-><c- mf>4.0</c-><c- p>))</c-><c- o>+</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->
     context<c- p>.</c->shadowColor <c- o>=</c-> <c- t>&apos;white&apos;</c-><c- p>;</c->
     context<c- p>.</c->shadowOffsetY <c- o>=</c-> <c- mf>30</c-><c- o>+</c-><c- k>this</c-><c- p>.</c->horizon<c- o>/</c-><c- mf>3</c-><c- p>;</c-> <c- c1>// offset down on canvas</c->
     context<c- p>.</c->shadowBlur <c- o>=</c-> <c- t>&apos;5&apos;</c-><c- p>;</c->
     context<c- p>.</c->fillStyle <c- o>=</c-> <c- t>&apos;white&apos;</c-><c- p>;</c->
     context<c- p>.</c->textAlign <c- o>=</c-> <c- t>&apos;left&apos;</c-><c- p>;</c->
     context<c- p>.</c->textBaseline <c- o>=</c-> <c- t>&apos;top&apos;</c-><c- p>;</c->
     context<c- p>.</c->font <c- o>=</c-> <c- t>&apos;20px sans-serif&apos;</c-><c- p>;</c->
     context<c- p>.</c->fillText<c- p>(</c-><c- t>&apos;WHATWG ROCKS&apos;</c-><c- p>,</c-> <c- mf>10</c-><c- p>,</c-> <c- o>-</c-><c- mf>30</c-><c- p>);</c-> <c- c1>// text up above canvas</c->
     context<c- p>.</c->restore<c- p>();</c->
     <c- c1>// then, draw the background tree</c->
     context<c- p>.</c->save<c- p>();</c->
     context<c- p>.</c->translate<c- p>(</c->width<c- o>-</c-><c- p>((</c-><c- k>this</c-><c- p>.</c->offset<c- o>+</c-><c- p>(</c-><c- k>this</c-><c- p>.</c->width<c- o>*</c-><c- mf>0.2</c-><c- p>))</c-> <c- o>%</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->width<c- o>*</c-><c- mf>1.5</c-><c- p>))</c-><c- o>+</c-><c- mf>30</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->
     context<c- p>.</c->beginPath<c- p>();</c->
     context<c- p>.</c->fillStyle <c- o>=</c-> <c- t>&apos;rgb(143,89,2)&apos;</c-><c- p>;</c->
     context<c- p>.</c->lineStyle <c- o>=</c-> <c- t>&apos;rgb(10,10,10)&apos;</c-><c- p>;</c->
     context<c- p>.</c->lineWidth <c- o>=</c-> <c- mf>2</c-><c- p>;</c->
     context<c- p>.</c->rect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- k>this</c-><c- p>.</c->horizon<c- o>+</c-><c- mf>5</c-><c- p>,</c-> <c- mf>10</c-><c- p>,</c-> <c- o>-</c-><c- mf>50</c-><c- p>);</c-> <c- c1>// trunk</c->
     context<c- p>.</c->fill<c- p>();</c->
     context<c- p>.</c->stroke<c- p>();</c->
     context<c- p>.</c->beginPath<c- p>();</c->
     context<c- p>.</c->fillStyle <c- o>=</c-> <c- t>&apos;rgb(78,154,6)&apos;</c-><c- p>;</c->
     context<c- p>.</c->arc<c- p>(</c-><c- mf>5</c-><c- p>,</c-> <c- k>this</c-><c- p>.</c->horizon<c- o>-</c-><c- mf>60</c-><c- p>,</c-> <c- mf>30</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> Math<c- p>.</c->PI<c- o>*</c-><c- mf>2</c-><c- p>);</c-> <c- c1>// leaves</c->
     context<c- p>.</c->fill<c- p>();</c->
     context<c- p>.</c->stroke<c- p>();</c->
     context<c- p>.</c->restore<c- p>();</c->
   <c- p>};</c->
   <c- k>this</c-><c- p>.</c->paintForeground <c- o>=</c-> <c- a>function</c-> <c- p>(</c->context<c- p>,</c-> width<c- p>,</c-> height<c- p>)</c-> <c- p>{</c->
     <c- c1>// draw the box that goes in front</c->
     context<c- p>.</c->save<c- p>();</c->
     context<c- p>.</c->translate<c- p>(</c->width<c- o>-</c-><c- p>((</c-><c- k>this</c-><c- p>.</c->offset<c- o>+</c-><c- p>(</c-><c- k>this</c-><c- p>.</c->width<c- o>*</c-><c- mf>0.7</c-><c- p>))</c-> <c- o>%</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->width<c- o>*</c-><c- mf>1.1</c-><c- p>))</c-><c- o>+</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>);</c->
     context<c- p>.</c->beginPath<c- p>();</c->
     context<c- p>.</c->rect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- k>this</c-><c- p>.</c->horizon <c- o>-</c-> <c- mf>5</c-><c- p>,</c-> <c- mf>25</c-><c- p>,</c-> <c- mf>25</c-><c- p>);</c->
     context<c- p>.</c->fillStyle <c- o>=</c-> <c- t>&apos;rgb(220,154,94)&apos;</c-><c- p>;</c->
     context<c- p>.</c->lineStyle <c- o>=</c-> <c- t>&apos;rgb(10,10,10)&apos;</c-><c- p>;</c->
     context<c- p>.</c->lineWidth <c- o>=</c-> <c- mf>2</c-><c- p>;</c->
     context<c- p>.</c->fill<c- p>();</c->
     context<c- p>.</c->stroke<c- p>();</c->
     context<c- p>.</c->restore<c- p>();</c->
   <c- p>};</c->
 <c- p>};</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> BlueRobot <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
   <c- k>this</c-><c- p>.</c->sprites <c- o>=</c-> <c- k>new</c-> Image<c- p>();</c->
   <c- k>this</c-><c- p>.</c->sprites<c- p>.</c->src <c- o>=</c-> <c- t>&apos;blue-robot.png&apos;</c-><c- p>;</c-> <c- c1>// this sprite sheet has 8 cells</c->
   <c- k>this</c-><c- p>.</c->targetMode <c- o>=</c-> <c- t>&apos;idle&apos;</c-><c- p>;</c->
   <c- k>this</c-><c- p>.</c->walk <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
     <c- k>this</c-><c- p>.</c->targetMode <c- o>=</c-> <c- t>&apos;walk&apos;</c-><c- p>;</c->
   <c- p>};</c->
   <c- k>this</c-><c- p>.</c->stop <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
     <c- k>this</c-><c- p>.</c->targetMode <c- o>=</c-> <c- t>&apos;idle&apos;</c-><c- p>;</c->
   <c- p>};</c->
   <c- k>this</c-><c- p>.</c->frameIndex <c- o>=</c-> <c- p>{</c->
     <c- t>&apos;idle&apos;</c-><c- o>:</c-> <c- p>[</c-><c- mf>0</c-><c- p>],</c-> <c- c1>// first cell is the idle frame</c->
     <c- t>&apos;walk&apos;</c-><c- o>:</c-> <c- p>[</c-><c- mf>1</c-><c- p>,</c-><c- mf>2</c-><c- p>,</c-><c- mf>3</c-><c- p>,</c-><c- mf>4</c-><c- p>,</c-><c- mf>5</c-><c- p>,</c-><c- mf>6</c-><c- p>],</c-> <c- c1>// the walking animation is cells 1-6</c->
     <c- t>&apos;stop&apos;</c-><c- o>:</c-> <c- p>[</c-><c- mf>7</c-><c- p>],</c-> <c- c1>// last cell is the stopping animation</c->
   <c- p>};</c->
   <c- k>this</c-><c- p>.</c->mode <c- o>=</c-> <c- t>&apos;idle&apos;</c-><c- p>;</c->
   <c- k>this</c-><c- p>.</c->frame <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> <c- c1>// index into frameIndex</c->
   <c- k>this</c-><c- p>.</c->tick <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
     <c- c1>// this advances the frame and the robot</c->
     <c- c1>// the return value is how many pixels the robot has moved</c->
     <c- k>this</c-><c- p>.</c->frame <c- o>+=</c-> <c- mf>1</c-><c- p>;</c->
     <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->frame <c- o>&gt;=</c-> <c- k>this</c-><c- p>.</c->frameIndex<c- p>[</c-><c- k>this</c-><c- p>.</c->mode<c- p>].</c->length<c- p>)</c-> <c- p>{</c->
       <c- c1>// we&apos;ve reached the end of this animation cycle</c->
       <c- k>this</c-><c- p>.</c->frame <c- o>=</c-> <c- mf>0</c-><c- p>;</c->
       <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->mode <c- o>!=</c-> <c- k>this</c-><c- p>.</c->targetMode<c- p>)</c-> <c- p>{</c->
         <c- c1>// switch to next cycle</c->
         <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->mode <c- o>==</c-> <c- t>&apos;walk&apos;</c-><c- p>)</c-> <c- p>{</c->
           <c- c1>// we need to stop walking before we decide what to do next</c->
           <c- k>this</c-><c- p>.</c->mode <c- o>=</c-> <c- t>&apos;stop&apos;</c-><c- p>;</c->
         <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->mode <c- o>==</c-> <c- t>&apos;stop&apos;</c-><c- p>)</c-> <c- p>{</c->
           <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->targetMode <c- o>==</c-> <c- t>&apos;walk&apos;</c-><c- p>)</c->
             <c- k>this</c-><c- p>.</c->mode <c- o>=</c-> <c- t>&apos;walk&apos;</c-><c- p>;</c->
           <c- k>else</c->
             <c- k>this</c-><c- p>.</c->mode <c- o>=</c-> <c- t>&apos;idle&apos;</c-><c- p>;</c->
         <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->mode <c- o>==</c-> <c- t>&apos;idle&apos;</c-><c- p>)</c-> <c- p>{</c->
           <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->targetMode <c- o>==</c-> <c- t>&apos;walk&apos;</c-><c- p>)</c->
             <c- k>this</c-><c- p>.</c->mode <c- o>=</c-> <c- t>&apos;walk&apos;</c-><c- p>;</c->
         <c- p>}</c->
       <c- p>}</c->
     <c- p>}</c->
     <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->mode <c- o>==</c-> <c- t>&apos;walk&apos;</c-><c- p>)</c->
       <c- k>return</c-> <c- mf>8</c-><c- p>;</c->
     <c- k>return</c-> <c- mf>0</c-><c- p>;</c->
   <c- p>},</c->
   <c- k>this</c-><c- p>.</c->paint <c- o>=</c-> <c- a>function</c-> <c- p>(</c->context<c- p>,</c-> x<c- p>,</c-> y<c- p>)</c-> <c- p>{</c->
     <c- k>if</c-> <c- p>(</c-><c- o>!</c-><c- k>this</c-><c- p>.</c->sprites<c- p>.</c->complete<c- p>)</c-> <c- k>return</c-><c- p>;</c->
     <c- c1>// draw the right frame out of the sprite sheet onto the canvas</c->
     <c- c1>// we assume each frame is as high as the sprite sheet</c->
     <c- c1>// the x,y coordinates give the position of the bottom center of the sprite</c->
     context<c- p>.</c->drawImage<c- p>(</c-><c- k>this</c-><c- p>.</c->sprites<c- p>,</c->
                       <c- k>this</c-><c- p>.</c->frameIndex<c- p>[</c-><c- k>this</c-><c- p>.</c->mode<c- p>][</c-><c- k>this</c-><c- p>.</c->frame<c- p>]</c-> <c- o>*</c-> <c- k>this</c-><c- p>.</c->sprites<c- p>.</c->height<c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- k>this</c-><c- p>.</c->sprites<c- p>.</c->height<c- p>,</c-> <c- k>this</c-><c- p>.</c->sprites<c- p>.</c->height<c- p>,</c->
                       x<c- o>-</c-><c- k>this</c-><c- p>.</c->sprites<c- p>.</c->height<c- o>/</c-><c- mf>2</c-><c- p>,</c-> y<c- o>-</c-><c- k>this</c-><c- p>.</c->sprites<c- p>.</c->height<c- p>,</c-> <c- k>this</c-><c- p>.</c->sprites<c- p>.</c->height<c- p>,</c-> <c- k>this</c-><c- p>.</c->sprites<c- p>.</c->height<c- p>);</c->
   <c- p>};</c->
 <c- p>};</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> canvas <c- o>=</c-> document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>];</c->
 <c- a>var</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;2d&apos;</c-><c- p>);</c->
 <c- a>var</c-> landscape <c- o>=</c-> <c- k>new</c-> Landscape<c- p>(</c->context<c- p>,</c-> canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->
 <c- a>var</c-> blueRobot <c- o>=</c-> <c- k>new</c-> BlueRobot<c- p>();</c->
 <c- c1>// paint when the browser wants us to, using requestAnimationFrame()</c->
 <c- a>function</c-> paint<c- p>()</c-> <c- p>{</c->
   context<c- p>.</c->clearRect<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->
   landscape<c- p>.</c->paintBackground<c- p>(</c->context<c- p>,</c-> canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->
   blueRobot<c- p>.</c->paint<c- p>(</c->context<c- p>,</c-> canvas<c- p>.</c->width<c- o>/</c-><c- mf>2</c-><c- p>,</c-> landscape<c- p>.</c->horizon<c- o>*</c-><c- mf>1.1</c-><c- p>);</c->
   landscape<c- p>.</c->paintForeground<c- p>(</c->context<c- p>,</c-> canvas<c- p>.</c->width<c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->
   requestAnimationFrame<c- p>(</c->paint<c- p>);</c->
 <c- p>}</c->
 paint<c- p>();</c->
 <c- c1>// but tick every 100ms, so that we don&apos;t slow down when we don&apos;t paint</c->
 setInterval<c- p>(</c-><c- a>function</c-> <c- p>()</c-> <c- p>{</c->
   <c- a>var</c-> dx <c- o>=</c-> blueRobot<c- p>.</c->tick<c- p>();</c->
   landscape<c- p>.</c->advance<c- p>(</c->dx<c- p>);</c->
 <c- p>},</c-> <c- mf>100</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;buttons&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Walk&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;blueRobot.walk()&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Stop&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;blueRobot.stop()&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c-> Blue Robot Player Sprite by <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://johncolburn.deviantart.com/&quot;</c-><c- p>&gt;</c->JohnColburn<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->.
 Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c-> This work is itself licensed under a <c- p>&lt;</c-><c- f>a</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;license&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://creativecommons.org/licenses/by-sa/3.0/&quot;</c-><c- p>&gt;</c->Creative
 Commons Attribution-ShareAlike 3.0 Unported License<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
</code></pre>

  </div>




  <h5 id=the-imagebitmap-rendering-context><span class=secno>4.12.5.2</span> The <code id=the-imagebitmap-rendering-context:imagebitmap><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> rendering context<a href=#the-imagebitmap-rendering-context class=self-link></a></h5>

  <h6 id=introduction-6><span class=secno>4.12.5.2.1</span> Introduction<a href=#introduction-6 class=self-link></a></h6>

  <p><code id=introduction-6:imagebitmaprenderingcontext><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> is a performance-oriented interface that provides a
  low overhead method for displaying the contents of <code id=introduction-6:imagebitmap><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> objects. It uses
  transfer semantics to reduce overall memory consumption. It also streamlines performance by
  avoiding intermediate compositing, unlike the <code id=introduction-6:dom-context-2d-drawimage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method of
  <code id=introduction-6:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>.</p>

  <p>Using an <code id=introduction-6:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element as an intermediate for getting an image resource into a
  canvas, for example, would result in two copies of the decoded image existing in memory at the
  same time: the <code id=introduction-6:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element's copy, and the one in the canvas's backing store. This
  memory cost can be prohibitive when dealing with extremely large images. This can be avoided by
  using <code id=introduction-6:imagebitmaprenderingcontext-2><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code>.</p>

  <div class=example>
   <p>Using <code id=introduction-6:imagebitmaprenderingcontext-3><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code>, here is how to transcode an image to the JPEG
   format in a memory- and CPU-efficient way:</p>

   <pre><code class='js'>createImageBitmap<c- p>(</c->inputImageBlob<c- p>).</c->then<c- p>(</c->image <c- p>=&gt;</c-> <c- p>{</c->
  <c- a>const</c-> canvas <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;canvas&apos;</c-><c- p>);</c->
  <c- a>const</c-> context <c- o>=</c-> canvas<c- p>.</c->getContext<c- p>(</c-><c- t>&apos;bitmaprenderer&apos;</c-><c- p>);</c->
  context<c- p>.</c->transferFromImageBitmap<c- p>(</c->image<c- p>);</c->

  canvas<c- p>.</c->toBlob<c- p>(</c->outputJPEGBlob <c- p>=&gt;</c-> <c- p>{</c->
    <c- c1>// Do something with outputJPEGBlob.</c->
  <c- p>},</c-> <c- t>&apos;image/jpeg&apos;</c-><c- p>);</c->
<c- p>});</c-></code></pre>
  </div>

  <h6 id=the-imagebitmaprenderingcontext-interface><span class=secno>4.12.5.2.2</span> The <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> interface<a href=#the-imagebitmaprenderingcontext-interface class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext title="The ImageBitmapRenderingContext interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given ImageBitmap. Its context id (the first argument to HTMLCanvasElement.getContext() or OffscreenCanvas.getContext()) is &quot;bitmaprenderer&quot;.">ImageBitmapRenderingContext</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>46+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>66+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <pre><code class='idl'>[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn id='imagebitmaprenderingcontext' data-dfn-type='interface'><c- g>ImageBitmapRenderingContext</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> (<a href='#htmlcanvaselement' id='the-imagebitmaprenderingcontext-interface:htmlcanvaselement'><c- n>HTMLCanvasElement</c-></a> <c- b>or</c-> <a href='#offscreencanvas' id='the-imagebitmaprenderingcontext-interface:offscreencanvas'><c- n>OffscreenCanvas</c-></a>) <a href='#dom-imagebitmaprenderingcontext-canvas' id='the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-canvas'><c- g>canvas</c-></a>;
  <c- b>undefined</c-> <a href='#dom-imagebitmaprenderingcontext-transferfromimagebitmap' id='the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap'><c- g>transferFromImageBitmap</c-></a>(<a id='the-imagebitmaprenderingcontext-interface:imagebitmap' href='imagebitmap-and-animations.html#imagebitmap'><c- n>ImageBitmap</c-></a>? <c- g>bitmap</c->);
};

<c- b>dictionary</c-> <dfn id='imagebitmaprenderingcontextsettings' data-dfn-type='dictionary'><c- g>ImageBitmapRenderingContextSettings</c-></dfn> {
  <c- b>boolean</c-> <a href='#dom-imagebitmaprenderingcontextsettings-alpha' id='the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontextsettings-alpha'><c- g>alpha</c-></a> = <c- b>true</c->;
};</code></pre>

  <dl class=domintro><dt><code><var>context</var> = <var>canvas</var>.<a href=#dom-canvas-getcontext id=the-imagebitmaprenderingcontext-interface:dom-canvas-getcontext>getContext</a>('bitmaprenderer' [, { [ <a href=#dom-imagebitmaprenderingcontextsettings-alpha id=the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontextsettings-alpha-2>alpha</a>: false ] } ])</code><dd>
    <p>Returns an <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-2><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object that is permanently bound to a
    particular <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element.</p>

    <p>If the <code id=the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontextsettings-alpha-3><a href=#dom-imagebitmaprenderingcontextsettings-alpha>alpha</a></code> setting is
    provided and set to false, then the canvas is forced to always be opaque.</p>
   <dt><code><var>context</var>.<a href=#dom-imagebitmaprenderingcontext-canvas id=dom-imagebitmaprenderingcontext-canvas-dev>canvas</a></code><dd><p>Returns the <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> element that the context is bound to.<dt><code><var>context</var>.<a href=#dom-imagebitmaprenderingcontext-transferfromimagebitmap id=dom-imagebitmaprenderingcontext-transferfromimagebitmap-dev>transferFromImageBitmap</a>(imageBitmap)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext/transferFromImageBitmap title="The ImageBitmapRenderingContext.transferFromImageBitmap() method displays the given ImageBitmap in the canvas associated with this rendering context. The ownership of the ImageBitmap is transferred to the canvas as well.">ImageBitmapRenderingContext/transferFromImageBitmap</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>50+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>66+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Transfers the underlying <a href=imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data id=the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data>bitmap data</a>
    from <var>imageBitmap</var> to <var>context</var>, and the bitmap becomes the contents of the
    <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element-3><a href=#the-canvas-element>canvas</a></code> element to which <var>context</var> is bound.</p>
   <dt><code><var>context</var>.<a href=#dom-imagebitmaprenderingcontext-transferfromimagebitmap id=the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap-2>transferFromImageBitmap</a>(null)</code><dd>
    <p>Replaces contents of the <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element-4><a href=#the-canvas-element>canvas</a></code> element to which <var>context</var> is bound
    with a <a id=the-imagebitmaprenderingcontext-interface:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> bitmap whose size corresponds to the <code id=the-imagebitmaprenderingcontext-interface:attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code id=the-imagebitmaprenderingcontext-interface:attr-canvas-height><a href=#attr-canvas-height>height</a></code>
    content attributes of the <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element-5><a href=#the-canvas-element>canvas</a></code> element.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=ImageBitmapRenderingContext id=dom-imagebitmaprenderingcontext-canvas data-dfn-type=attribute><code>canvas</code></dfn> attribute must return the
  value it was initialized to when the object was created.</p>

  <p>An <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-3><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object has an <dfn id=concept-imagebitmaprenderingcontext-output-bitmap>output bitmap</dfn>, which is a
  reference to <a href=imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data id=the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-2>bitmap data</a>.</p>

  <p>An <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-4><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object has a <dfn id=concept-imagebitmaprenderingcontext-bitmap-mode>bitmap mode</dfn>, which can be set to
  <dfn id=concept-imagebitmaprenderingcontext-valid>valid</dfn> or <dfn id=concept-imagebitmaprenderingcontext-blank>blank</dfn>. A value of <a href=#concept-imagebitmaprenderingcontext-valid id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-valid>valid</a> indicates that the context's
  <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap>output bitmap</a> refers to
  <a href=imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data id=the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-3>bitmap data</a> that was acquired via <code id=the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap-3><a href=#dom-imagebitmaprenderingcontext-transferfromimagebitmap>transferFromImageBitmap()</a></code>.
  A value <a href=#concept-imagebitmaprenderingcontext-blank id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-blank>blank</a> indicates that the
  context's <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-2>output
  bitmap</a> is a default transparent bitmap.</p>

  <p>An <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-5><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object also has an <dfn id=concept-imagebitmaprenderingcontext-alpha>alpha</dfn> flag, which can be set to true or
  false. When an <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-6><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object has its <a href=#concept-imagebitmaprenderingcontext-alpha id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha>alpha</a> flag set to false, the contents
  of the <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element-6><a href=#the-canvas-element>canvas</a></code> element to which the context is bound are obtained by
  compositing the context's <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-3>output bitmap</a> onto an
  <a id=the-imagebitmaprenderingcontext-interface:opaque-black href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque black</a> bitmap of the same size using the <a href=https://drafts.fxtf.org/compositing/#porterduffcompositingoperators_srcover id=the-imagebitmaprenderingcontext-interface:gcop-source-over data-x-internal=gcop-source-over>source-over</a> compositing operator. If the <a href=#concept-imagebitmaprenderingcontext-alpha id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha-2>alpha</a> flag is set to true, then the
  <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-4>output bitmap</a> is used as
  the contents of the <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element-7><a href=#the-canvas-element>canvas</a></code> element to which the context is bound.
  <a href=references.html#refsCOMPOSITE>[COMPOSITE]</a></p>

  <p class=note>The step of compositing over an <a id=the-imagebitmaprenderingcontext-interface:opaque-black-2 href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque black</a> bitmap ought to be
  elided whenever equivalent results can be obtained more efficiently by other means.</p>

  <hr>

  <p>When a user agent is required to <dfn id="set-an-imagebitmaprenderingcontext's-output-bitmap">set an <code>ImageBitmapRenderingContext</code>'s output
  bitmap</dfn>, with a <var>context</var> argument that is an
  <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-7><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object and an optional argument <var>bitmap</var> that
  refers to <a href=imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data id=the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-4>bitmap data</a>, it must run these
  steps:</p>

  <ol><li><p>If a <var>bitmap</var> argument was not provided, then:</p>

    <ol><li><p>Set <var>context</var>'s <a href=#concept-imagebitmaprenderingcontext-bitmap-mode id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-bitmap-mode>bitmap mode</a> to <a href=#concept-imagebitmaprenderingcontext-blank id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-blank-2>blank</a>.<li><p>Let <var>canvas</var> be the <code id=the-imagebitmaprenderingcontext-interface:the-canvas-element-8><a href=#the-canvas-element>canvas</a></code> element to which <var>context</var>
     is bound.<li><p>Set <var>context</var>'s <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-5>output bitmap</a> to be
     <a id=the-imagebitmaprenderingcontext-interface:transparent-black-2 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> with a <a id=the-imagebitmaprenderingcontext-interface:natural-width href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> equal to <a href=#obtain-numeric-values id=the-imagebitmaprenderingcontext-interface:obtain-numeric-values>the numeric value</a> of <var>canvas</var>'s <code id=the-imagebitmaprenderingcontext-interface:attr-canvas-width-2><a href=#attr-canvas-width>width</a></code> attribute and a <a id=the-imagebitmaprenderingcontext-interface:natural-height href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> equal
     to <a href=#obtain-numeric-values id=the-imagebitmaprenderingcontext-interface:obtain-numeric-values-2>the numeric value</a> of <var>canvas</var>'s
     <code id=the-imagebitmaprenderingcontext-interface:attr-canvas-height-2><a href=#attr-canvas-height>height</a></code> attribute, those values being interpreted
     in <a href=https://drafts.csswg.org/css-values/#px id="the-imagebitmaprenderingcontext-interface:'px'" data-x-internal="'px'">CSS pixels</a>.<li><p>Set the <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-6>output bitmap</a>'s <a href=#concept-canvas-origin-clean id=the-imagebitmaprenderingcontext-interface:concept-canvas-origin-clean>origin-clean</a> flag to true.</ol>
   <li><p>If a <var>bitmap</var> argument was provided, then:</p>

    <ol><li><p>Set <var>context</var>'s <a href=#concept-imagebitmaprenderingcontext-bitmap-mode id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-bitmap-mode-2>bitmap mode</a> to <a href=#concept-imagebitmaprenderingcontext-valid id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-valid-2>valid</a>.<li>
      <p>Set <var>context</var>'s <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-7>output bitmap</a> to refer
      to the same underlying bitmap data as <var>bitmap</var>, without making a copy.</p>

      <p class=note>The <a href=#concept-canvas-origin-clean id=the-imagebitmaprenderingcontext-interface:concept-canvas-origin-clean-2>origin-clean</a> flag of
      <var>bitmap</var> is included in the bitmap data to be referenced by <var>context</var>'s
      <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-8>output bitmap</a>.</p>
     </ol>
   </ol>

  <hr>

  <p>The <dfn id=imagebitmaprenderingcontext-creation-algorithm><code>ImageBitmapRenderingContext</code> creation algorithm</dfn>, which is passed a
  <var>target</var> and <var>options</var>, consists of running these steps:</p>

  <ol><li><p>Let <var>settings</var> be the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=the-imagebitmaprenderingcontext-interface:concept-idl-convert data-x-internal=concept-idl-convert>converting</a> <var>options</var> to the dictionary type
   <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontextsettings><a href=#imagebitmaprenderingcontextsettings>ImageBitmapRenderingContextSettings</a></code>. (This can throw an exception.)<li><p>Let <var>context</var> be a new <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-8><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object.<li><p>Initialize <var>context</var>'s <code id=the-imagebitmaprenderingcontext-interface:dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code>
   attribute to point to <var>target</var>.<li><p>Set <var>context</var>'s <a href=#concept-imagebitmaprenderingcontext-output-bitmap id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-9>output bitmap</a> to the same
   bitmap as <var>target</var>'s bitmap (so that they are shared).<li><p>Run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-imagebitmaprenderingcontext-interface:set-an-imagebitmaprenderingcontext's-output-bitmap">set an <code>ImageBitmapRenderingContext</code>'s output
   bitmap</a> with <var>context</var>.<li><p>Initialize <var>context</var>'s <a href=#concept-imagebitmaprenderingcontext-alpha id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha-3>alpha</a> flag to true.

   <li>
    <p>Process each of the members of <var>settings</var> as follows:</p>

    <dl><dt><dfn data-dfn-for=ImageBitmapRenderingContextSettings id=dom-imagebitmaprenderingcontextsettings-alpha data-dfn-type=dict-member><code>alpha</code></dfn><dd>If false, then set <var>context</var>'s <a href=#concept-imagebitmaprenderingcontext-alpha id=the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha-4>alpha</a> flag to false.</dl>
   <li><p>Return <var>context</var>.</ol>

  <hr>

  <p>The <dfn data-dfn-for=ImageBitmapRenderingContext id=dom-imagebitmaprenderingcontext-transferfromimagebitmap data-dfn-type=method><code>transferFromImageBitmap(<var>bitmap</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>Let <var>bitmapContext</var> be the <code id=the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-9><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code> object on
   which the <code id=the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap-4><a href=#dom-imagebitmaprenderingcontext-transferfromimagebitmap>transferFromImageBitmap()</a></code>
   method was called.<li><p>If <var>bitmap</var> is null, then run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-imagebitmaprenderingcontext-interface:set-an-imagebitmaprenderingcontext's-output-bitmap-2">set an
   ImageBitmapRenderingContext's output bitmap</a>, with <var>bitmapContext</var> as the
   <var>context</var> argument and no <var>bitmap</var> argument, then return.<li><p>If the value of <var>bitmap</var>'s <a id=the-imagebitmaprenderingcontext-interface:detached href=structured-data.html#detached>[[Detached]]</a> internal slot is set to
   true, then throw an <a id=the-imagebitmaprenderingcontext-interface:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-imagebitmaprenderingcontext-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-imagebitmaprenderingcontext-interface:set-an-imagebitmaprenderingcontext's-output-bitmap-3">set an <code>ImageBitmapRenderingContext</code>'s output
   bitmap</a>, with the <var>context</var> argument equal to <var>bitmapContext</var>, and the
   <var>bitmap</var> argument referring to <var>bitmap</var>'s underlying <a href=imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data id=the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-5>bitmap data</a>.

   <li><p>Set the value of <var>bitmap</var>'s <a id=the-imagebitmaprenderingcontext-interface:detached-2 href=structured-data.html#detached>[[Detached]]</a> internal slot to
   true.<li><p>Unset <var>bitmap</var>'s <a href=imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data id=the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-6>bitmap
   data</a>.</ol>

  




  <h5 id=the-offscreencanvas-interface><span class=secno>4.12.5.3</span> The <code id=the-offscreencanvas-interface:offscreencanvas><a href=#offscreencanvas>OffscreenCanvas</a></code> interface<a href=#the-offscreencanvas-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas title="When using the <canvas> element or the Canvas API, rendering, animation, and user interaction usually happen on the main execution thread of a web application. The computation relating to canvas animations and rendering can have a significant impact on application performance.">OffscreenCanvas</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <pre><code class='idl'><c- b>typedef</c-> (<a href='#offscreencanvasrenderingcontext2d' id='the-offscreencanvas-interface:offscreencanvasrenderingcontext2d'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>or</c-> <a href='#imagebitmaprenderingcontext' id='the-offscreencanvas-interface:imagebitmaprenderingcontext'><c- n>ImageBitmapRenderingContext</c-></a> <c- b>or</c-> <a id='the-offscreencanvas-interface:webglrenderingcontext' href='https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext' data-x-internal='webglrenderingcontext'><c- n>WebGLRenderingContext</c-></a> <c- b>or</c-> <a id='the-offscreencanvas-interface:webgl2renderingcontext' href='https://www.khronos.org/registry/webgl/specs/latest/2.0/#WebGL2RenderingContext' data-x-internal='webgl2renderingcontext'><c- n>WebGL2RenderingContext</c-></a> <c- b>or</c-> <a id='the-offscreencanvas-interface:gpucanvascontext' href='https://gpuweb.github.io/gpuweb/#canvas-context' data-x-internal='gpucanvascontext'><c- n>GPUCanvasContext</c-></a>) <dfn id='offscreenrenderingcontext' data-dfn-type='typedef'><c- g>OffscreenRenderingContext</c-></dfn>;

<c- b>dictionary</c-> <dfn id='imageencodeoptions' data-dfn-type='dictionary'><c- g>ImageEncodeOptions</c-></dfn> {
  <c- b>DOMString</c-> <a href='#image-encode-options-type' id='the-offscreencanvas-interface:image-encode-options-type'><c- g>type</c-></a> = &quot;image/png&quot;;
  <c- b>unrestricted</c-> <c- b>double</c-> <a href='#image-encode-options-quality' id='the-offscreencanvas-interface:image-encode-options-quality'><c- g>quality</c-></a>;
};

<c- b>enum</c-> <dfn id='offscreenrenderingcontextid' data-dfn-type='enum'><c- g>OffscreenRenderingContextId</c-></dfn> { <c- s>&quot;</c-><a href='#offscreen-context-type-2d' id='the-offscreencanvas-interface:offscreen-context-type-2d'><c- s>2d</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#offscreen-context-type-bitmaprenderer' id='the-offscreencanvas-interface:offscreen-context-type-bitmaprenderer'><c- s>bitmaprenderer</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#offscreen-context-type-webgl' id='the-offscreencanvas-interface:offscreen-context-type-webgl'><c- s>webgl</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#offscreen-context-type-webgl2' id='the-offscreencanvas-interface:offscreen-context-type-webgl2'><c- s>webgl2</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#offscreen-context-type-webgpu' id='the-offscreencanvas-interface:offscreen-context-type-webgpu'><c- s>webgpu</c-></a><c- s>&quot;</c-> };

[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->), <a id='the-offscreencanvas-interface:transferable' href='structured-data.html#transferable'><c- g>Transferable</c-></a>]
<c- b>interface</c-> <dfn id='offscreencanvas' data-dfn-type='interface'><c- g>OffscreenCanvas</c-></dfn> : <a id='the-offscreencanvas-interface:eventtarget' href='https://dom.spec.whatwg.org/#interface-eventtarget' data-x-internal='eventtarget'><c- n>EventTarget</c-></a> {
  <a href='#dom-offscreencanvas' id='the-offscreencanvas-interface:dom-offscreencanvas'><c- g>constructor</c-></a>([<c- g>EnforceRange</c->] <c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-> <c- g>width</c->, [<c- g>EnforceRange</c->] <c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-> <c- g>height</c->);

  <c- b>attribute</c-> [<c- g>EnforceRange</c->] <c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-> <a href='#dom-offscreencanvas-width' id='the-offscreencanvas-interface:dom-offscreencanvas-width'><c- g>width</c-></a>;
  <c- b>attribute</c-> [<c- g>EnforceRange</c->] <c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-> <a href='#dom-offscreencanvas-height' id='the-offscreencanvas-interface:dom-offscreencanvas-height'><c- g>height</c-></a>;

  <a href='#offscreenrenderingcontext' id='the-offscreencanvas-interface:offscreenrenderingcontext'><c- n>OffscreenRenderingContext</c-></a>? <a href='#dom-offscreencanvas-getcontext' id='the-offscreencanvas-interface:dom-offscreencanvas-getcontext'><c- g>getContext</c-></a>(<a href='#offscreenrenderingcontextid' id='the-offscreencanvas-interface:offscreenrenderingcontextid'><c- n>OffscreenRenderingContextId</c-></a> <c- g>contextId</c->, <c- b>optional</c-> <c- b>any</c-> <c- g>options</c-> = <c- b>null</c->);
  <a id='the-offscreencanvas-interface:imagebitmap' href='imagebitmap-and-animations.html#imagebitmap'><c- n>ImageBitmap</c-></a> <a href='#dom-offscreencanvas-transfertoimagebitmap' id='the-offscreencanvas-interface:dom-offscreencanvas-transfertoimagebitmap'><c- g>transferToImageBitmap</c-></a>();
  <a href='https://webidl.spec.whatwg.org/#idl-promise' id='the-offscreencanvas-interface:idl-promise' data-x-internal='idl-promise'><c- b>Promise</c-></a>&lt;<a id='the-offscreencanvas-interface:blob' href='https://w3c.github.io/FileAPI/#dfn-Blob' data-x-internal='blob'><c- n>Blob</c-></a>&gt; <a href='#dom-offscreencanvas-converttoblob' id='the-offscreencanvas-interface:dom-offscreencanvas-converttoblob'><c- g>convertToBlob</c-></a>(<c- b>optional</c-> <a href='#imageencodeoptions' id='the-offscreencanvas-interface:imageencodeoptions'><c- n>ImageEncodeOptions</c-></a> <c- g>options</c-> = {});

  <c- b>attribute</c-> <a id='the-offscreencanvas-interface:eventhandler' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-offscreencanvas-oncontextlost' id='the-offscreencanvas-interface:handler-offscreencanvas-oncontextlost'><c- g>oncontextlost</c-></a>;
  <c- b>attribute</c-> <a id='the-offscreencanvas-interface:eventhandler-2' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-offscreencanvas-oncontextrestored' id='the-offscreencanvas-interface:handler-offscreencanvas-oncontextrestored'><c- g>oncontextrestored</c-></a>;
};</code></pre>

  <p class=note><code id=the-offscreencanvas-interface:offscreencanvas-2><a href=#offscreencanvas>OffscreenCanvas</a></code> is an <code id=the-offscreencanvas-interface:eventtarget-2><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code>, so both
  <code id=the-offscreencanvas-interface:offscreencanvasrenderingcontext2d-2><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code> and WebGL can fire events at it.
  <code id=the-offscreencanvas-interface:offscreencanvasrenderingcontext2d-3><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code> can fire <code id=the-offscreencanvas-interface:event-contextlost><a href=indices.html#event-contextlost>contextlost</a></code> and <code id=the-offscreencanvas-interface:event-contextrestored><a href=indices.html#event-contextrestored>contextrestored</a></code>, and WebGL can fire <code>webglcontextlost</code> and <code>webglcontextrestored</code>.
  <a href=references.html#refsWEBGL>[WEBGL]</a></p>

  <p><code id=the-offscreencanvas-interface:offscreencanvas-3><a href=#offscreencanvas>OffscreenCanvas</a></code> objects are used to create rendering contexts, much like an
  <code id=the-offscreencanvas-interface:htmlcanvaselement><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, but with no connection to the DOM. This makes it possible to
  use canvas rendering contexts in <a href=workers.html#workers>workers</a>.</p>

  <p>An <code id=the-offscreencanvas-interface:offscreencanvas-4><a href=#offscreencanvas>OffscreenCanvas</a></code> object may hold a weak reference to a <dfn id=offscreencanvas-placeholder>placeholder <code>canvas</code> element</dfn>, which is
  typically in the DOM, whose embedded content is provided by the <code id=the-offscreencanvas-interface:offscreencanvas-5><a href=#offscreencanvas>OffscreenCanvas</a></code>
  object. The bitmap of the <code id=the-offscreencanvas-interface:offscreencanvas-6><a href=#offscreencanvas>OffscreenCanvas</a></code> object is pushed to the <a href=#offscreencanvas-placeholder id=the-offscreencanvas-interface:offscreencanvas-placeholder>placeholder <code>canvas</code> element</a> as part of
  the <code id=the-offscreencanvas-interface:offscreencanvas-7><a href=#offscreencanvas>OffscreenCanvas</a></code>'s <a id=the-offscreencanvas-interface:relevant-agent href=webappapis.html#relevant-agent>relevant agent</a>'s <a href=webappapis.html#concept-agent-event-loop id=the-offscreencanvas-interface:concept-agent-event-loop>event loop</a>'s <a id=the-offscreencanvas-interface:update-the-rendering href=webappapis.html#update-the-rendering>update the rendering</a>
  steps.</p>

  <dl class=domintro><dt><code><var>offscreenCanvas</var> = new <a href=#dom-offscreencanvas id=dom-offscreencanvas-dev>OffscreenCanvas</a>(<var>width</var>,
   <var>height</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/OffscreenCanvas title="The OffscreenCanvas() constructor returns a newly instantiated OffscreenCanvas object.">OffscreenCanvas/OffscreenCanvas</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns a new <code id=the-offscreencanvas-interface:offscreencanvas-8><a href=#offscreencanvas>OffscreenCanvas</a></code> object that is not linked to a <a href=#offscreencanvas-placeholder id=the-offscreencanvas-interface:offscreencanvas-placeholder-2>placeholder <code>canvas</code> element</a>, and whose
    bitmap's size is determined by the <var>width</var> and <var>height</var> arguments.</p>
   <dt><code><var>context</var> = <var>offscreenCanvas</var>.<a href=#dom-offscreencanvas-getcontext id=dom-offscreencanvas-getcontext-dev>getContext</a>(<var>contextId</var> [,
   <var>options</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/getContext title="The OffscreenCanvas.getContext() method returns a drawing context for an offscreen canvas, or null if the context identifier is not supported.">OffscreenCanvas/getContext</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns an object that exposes an API for drawing on the <code id=the-offscreencanvas-interface:offscreencanvas-9><a href=#offscreencanvas>OffscreenCanvas</a></code> object.
    <var>contextId</var> specifies the desired API: "<code id=the-offscreencanvas-interface:offscreen-context-type-2d-2><a href=#offscreen-context-type-2d>2d</a></code>", "<code id=the-offscreencanvas-interface:offscreen-context-type-bitmaprenderer-2><a href=#offscreen-context-type-bitmaprenderer>bitmaprenderer</a></code>", "<code id=the-offscreencanvas-interface:offscreen-context-type-webgl-2><a href=#offscreen-context-type-webgl>webgl</a></code>", "<code id=the-offscreencanvas-interface:offscreen-context-type-webgl2-2><a href=#offscreen-context-type-webgl2>webgl2</a></code>", or "<code id=the-offscreencanvas-interface:offscreen-context-type-webgpu-2><a href=#offscreen-context-type-webgpu>webgpu</a></code>". <var>options</var> is handled by that
    API.</p>

    <p>This specification defines the "<code id=the-offscreencanvas-interface:canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" context below,
    which is similar but distinct from the "<code id=the-offscreencanvas-interface:offscreen-context-type-2d-3><a href=#offscreen-context-type-2d>2d</a></code>"
    context that is created from a <code id=the-offscreencanvas-interface:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element. The WebGL specifications define the
    "<code id=the-offscreencanvas-interface:offscreen-context-type-webgl-3><a href=#offscreen-context-type-webgl>webgl</a></code>" and "<code id=the-offscreencanvas-interface:offscreen-context-type-webgl2-3><a href=#offscreen-context-type-webgl2>webgl2</a></code>" contexts. <cite>WebGPU</cite> defines the
    "<code id=the-offscreencanvas-interface:offscreen-context-type-webgpu-3><a href=#offscreen-context-type-webgpu>webgpu</a></code>" context. <a href=references.html#refsWEBGL>[WEBGL]</a>
    <a href=references.html#refsWEBGPU>[WEBGPU]</a></p>

    <p>Returns null if the canvas has already been initialized with another context type (e.g.,
    trying to get a "<code id=the-offscreencanvas-interface:offscreen-context-type-2d-4><a href=#offscreen-context-type-2d>2d</a></code>" context after getting a
    "<code id=the-offscreencanvas-interface:offscreen-context-type-webgl-4><a href=#offscreen-context-type-webgl>webgl</a></code>" context).</p>
   </dl>

  

  <p>An <code id=the-offscreencanvas-interface:offscreencanvas-10><a href=#offscreencanvas>OffscreenCanvas</a></code> object has an internal <dfn id=offscreencanvas-bitmap>bitmap</dfn> that is initialized when the object
  is created. The width and height of the <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap>bitmap</a> are
  equal to the values of the <code id=the-offscreencanvas-interface:dom-offscreencanvas-width-2><a href=#dom-offscreencanvas-width>width</a></code> and <code id=the-offscreencanvas-interface:dom-offscreencanvas-height-2><a href=#dom-offscreencanvas-height>height</a></code> attributes of the <code id=the-offscreencanvas-interface:offscreencanvas-11><a href=#offscreencanvas>OffscreenCanvas</a></code>
  object. Initially, all the bitmap's pixels are <a id=the-offscreencanvas-interface:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>.</p>

  <p>An <code id=the-offscreencanvas-interface:offscreencanvas-12><a href=#offscreencanvas>OffscreenCanvas</a></code> object has an internal <dfn id=offscreencanvas-inherited-lang>inherited language</dfn> and <dfn id=offscreencanvas-inherited-direction>inherited direction</dfn> set when
  the <code id=the-offscreencanvas-interface:offscreencanvas-13><a href=#offscreencanvas>OffscreenCanvas</a></code> is created.</p>

  <p>An <code id=the-offscreencanvas-interface:offscreencanvas-14><a href=#offscreencanvas>OffscreenCanvas</a></code> object can have a rendering context bound to it. Initially,
  it does not have a bound rendering context. To keep track of whether it has a rendering context
  or not, and what kind of rendering context it is, an <code id=the-offscreencanvas-interface:offscreencanvas-15><a href=#offscreencanvas>OffscreenCanvas</a></code> object also
  has a <dfn id=offscreencanvas-context-mode>context mode</dfn>, which is initially <dfn id=offscreencanvas-context-none>none</dfn> but can be changed to either <dfn id=offscreencanvas-context-2d>2d</dfn>, <dfn id=offscreencanvas-context-bitmaprenderer>bitmaprenderer</dfn>, <dfn id=offscreencanvas-context-webgl>webgl</dfn>, <dfn id=offscreencanvas-context-webgl2>webgl2</dfn>, <dfn id=offscreencanvas-context-webgpu>webgpu</dfn>, or <dfn id=offscreencanvas-context-detached>detached</dfn> by algorithms defined in this
  specification.</p>

  <p>The <dfn data-dfn-for=OffscreenCanvas id=dom-offscreencanvas data-dfn-type=constructor><code>new OffscreenCanvas(<var>width</var>,
  <var>height</var>)</code></dfn> constructor steps are:</p>

  <ol><li><p>Initialize the <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-2>bitmap</a> of <a id=the-offscreencanvas-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>
   to a rectangular array of <a id=the-offscreencanvas-interface:transparent-black-2 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> pixels of the dimensions specified
   by <var>width</var> and <var>height</var>.<li><p>Initialize the <code id=the-offscreencanvas-interface:dom-offscreencanvas-width-3><a href=#dom-offscreencanvas-width>width</a></code> of <a id=the-offscreencanvas-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>
   to <var>width</var>.<li><p>Initialize the <code id=the-offscreencanvas-interface:dom-offscreencanvas-height-3><a href=#dom-offscreencanvas-height>height</a></code> of
   <a id=the-offscreencanvas-interface:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> to <var>height</var>.<li><p>Set <a id=the-offscreencanvas-interface:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-inherited-lang id=the-offscreencanvas-interface:offscreencanvas-inherited-lang>inherited
   language</a> to <a href=dom.html#concept-explicitly-unknown id=the-offscreencanvas-interface:concept-explicitly-unknown>explicitly unknown</a>.<li><p>Set <a id=the-offscreencanvas-interface:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-inherited-direction id=the-offscreencanvas-interface:offscreencanvas-inherited-direction>inherited
   direction</a> to "<code>ltr</code>".<li><p>Let <var>global</var> be the <a id=the-offscreencanvas-interface:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a> of
   <a id=the-offscreencanvas-interface:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li>
    <p>If <var>global</var> is a <code id=the-offscreencanvas-interface:window><a href=nav-history-apis.html#window>Window</a></code> object:</p>

    <ol><li><p>Let <var>element</var> be the <a id=the-offscreencanvas-interface:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> of <var>global</var>'s
     <a href=nav-history-apis.html#concept-document-window id=the-offscreencanvas-interface:concept-document-window>associated <code>Document</code></a>.<li>
      <p>If <var>element</var> is not null:</p>

      <ol><li><p>Set the <a href=#offscreencanvas-inherited-lang id=the-offscreencanvas-interface:offscreencanvas-inherited-lang-2>inherited language</a>
       of <a id=the-offscreencanvas-interface:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> to <var>element</var>'s <a href=dom.html#language id=the-offscreencanvas-interface:language>language</a>.<li><p>Set the <a href=#offscreencanvas-inherited-direction id=the-offscreencanvas-interface:offscreencanvas-inherited-direction-2>inherited
       direction</a> of <a id=the-offscreencanvas-interface:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> to <var>element</var>'s <a href=dom.html#the-directionality id=the-offscreencanvas-interface:the-directionality>directionality</a>.</ol>
     </ol>
   </ol>

  <p><code id=the-offscreencanvas-interface:offscreencanvas-16><a href=#offscreencanvas>OffscreenCanvas</a></code> objects are <a href=structured-data.html#transferable-objects id=the-offscreencanvas-interface:transferable-objects>transferable</a>. Their <a id=the-offscreencanvas-interface:transfer-steps href=structured-data.html#transfer-steps>transfer steps</a>, given <var>value</var> and
  <var>dataHolder</var>, are as follows:</p>

  <ol><li><p>If <var>value</var>'s <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode>context mode</a> is
   not equal to <a href=#offscreencanvas-context-none id=the-offscreencanvas-interface:offscreencanvas-context-none>none</a>, then throw an
   <a id=the-offscreencanvas-interface:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-offscreencanvas-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Set <var>value</var>'s <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-2>context mode</a> to
   <a href=#offscreencanvas-context-detached id=the-offscreencanvas-interface:offscreencanvas-context-detached>detached</a>.<li><p>Let <var>width</var> and <var>height</var> be the dimensions of <var>value</var>'s <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-3>bitmap</a>.<li><p>Let <var>language</var> and <var>direction</var> be the values of <var>value</var>'s
   <a href=#offscreencanvas-inherited-lang id=the-offscreencanvas-interface:offscreencanvas-inherited-lang-3>inherited language</a> and
   <a href=#offscreencanvas-inherited-direction id=the-offscreencanvas-interface:offscreencanvas-inherited-direction-3>inherited direction</a>.<li><p>Unset <var>value</var>'s <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-4>bitmap</a>.<li><p>Set <var>dataHolder</var>.[[Width]] to <var>width</var> and
   <var>dataHolder</var>.[[Height]] to <var>height</var>.<li><p>Set <var>dataHolder</var>.[[Language]] to <var>language</var> and
   <var>dataHolder</var>.[[Direction]] to <var>direction</var>.<li><p>Set <var>dataHolder</var>.[[PlaceholderCanvas]] to be a weak reference to
   <var>value</var>'s <a href=#offscreencanvas-placeholder id=the-offscreencanvas-interface:offscreencanvas-placeholder-3>placeholder <code>canvas</code>
   element</a>, if <var>value</var> has one, or null if it does not.</ol>

  <p>Their <a id=the-offscreencanvas-interface:transfer-receiving-steps href=structured-data.html#transfer-receiving-steps>transfer-receiving steps</a>, given <var>dataHolder</var> and <var>value</var>,
  are:</p>

  <ol><li><p>Initialize <var>value</var>'s <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-5>bitmap</a> to a
   rectangular array of <a id=the-offscreencanvas-interface:transparent-black-3 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> pixels with width given by
   <var>dataHolder</var>.[[Width]] and height given by <var>dataHolder</var>.[[Height]].<li><p>Set <var>value</var>'s <a href=#offscreencanvas-inherited-lang id=the-offscreencanvas-interface:offscreencanvas-inherited-lang-4>inherited
   language</a> to <var>dataHolder</var>.[[Language]] and its <a href=#offscreencanvas-inherited-direction id=the-offscreencanvas-interface:offscreencanvas-inherited-direction-4>inherited direction</a> to
   <var>dataHolder</var>.[[Direction]].<li><p>If <var>dataHolder</var>.[[PlaceholderCanvas]] is not null, set <var>value</var>'s <a href=#offscreencanvas-placeholder id=the-offscreencanvas-interface:offscreencanvas-placeholder-4>placeholder <code>canvas</code> element</a> to
   <var>dataHolder</var>.[[PlaceholderCanvas]] (while maintaining the weak reference
   semantics).</ol>

  <hr>

  <p>The <dfn data-dfn-for=OffscreenCanvas id=dom-offscreencanvas-getcontext data-dfn-type=method><code>getContext(<var>contextId</var>,
  <var>options</var>)</code></dfn> method of an <code id=the-offscreencanvas-interface:offscreencanvas-17><a href=#offscreencanvas>OffscreenCanvas</a></code> object, when invoked,
  must run these steps:</p>

  <ol><li><p>If <var>options</var> is not an <a href=https://webidl.spec.whatwg.org/#idl-object id=the-offscreencanvas-interface:idl-object data-x-internal=idl-object>object</a>, then set
   <var>options</var> to null.<li><p>Set <var>options</var> to the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=the-offscreencanvas-interface:concept-idl-convert data-x-internal=concept-idl-convert>converting</a> <var>options</var> to a JavaScript value.<li>
    <p>Run the steps in the cell of the following table whose column header matches this
    <code id=the-offscreencanvas-interface:offscreencanvas-18><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-3>context
    mode</a> and whose row header matches <var>contextId</var>:</p>

    <table><thead><tr><td>
       <th><a href=#offscreencanvas-context-none id=the-offscreencanvas-interface:offscreencanvas-context-none-2>none</a>
       <th><a href=#offscreencanvas-context-2d id=the-offscreencanvas-interface:offscreencanvas-context-2d>2d</a>
       <th><a href=#offscreencanvas-context-bitmaprenderer id=the-offscreencanvas-interface:offscreencanvas-context-bitmaprenderer>bitmaprenderer</a>
       <th><a href=#offscreencanvas-context-webgl id=the-offscreencanvas-interface:offscreencanvas-context-webgl>webgl</a> or <a href=#offscreencanvas-context-webgl2 id=the-offscreencanvas-interface:offscreencanvas-context-webgl2>webgl2</a>
       <th><a href=#offscreencanvas-context-webgpu id=the-offscreencanvas-interface:offscreencanvas-context-webgpu>webgpu</a>
       <th><a href=#offscreencanvas-context-detached id=the-offscreencanvas-interface:offscreencanvas-context-detached-2>detached</a>
     <tbody><tr><th>"<dfn id=offscreen-context-type-2d><code>2d</code></dfn>"
       <td>
        <ol><li><p>Let <var>context</var> be the result of running the
         <a href=#offscreen-2d-context-creation-algorithm id=the-offscreencanvas-interface:offscreen-2d-context-creation-algorithm>offscreen 2D context creation algorithm</a> given
         <a id=the-offscreencanvas-interface:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and <var>options</var>.<li><p>Set <a id=the-offscreencanvas-interface:this-10 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-4>context
         mode</a> to <a href=#offscreencanvas-context-2d id=the-offscreencanvas-interface:offscreencanvas-context-2d-2>2d</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return the same object as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Throw an <a id=the-offscreencanvas-interface:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-offscreencanvas-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
      <tr><th>"<dfn id=offscreen-context-type-bitmaprenderer><code>bitmaprenderer</code></dfn>"
       <td>
        <ol><li><p>Let <var>context</var> be the result of running the
         <a href=#imagebitmaprenderingcontext-creation-algorithm id=the-offscreencanvas-interface:imagebitmaprenderingcontext-creation-algorithm><code>ImageBitmapRenderingContext</code> creation
         algorithm</a> given <a id=the-offscreencanvas-interface:this-11 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and <var>options</var>.<li><p>Set <a id=the-offscreencanvas-interface:this-12 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-5>context
         mode</a> to <a href=#offscreencanvas-context-bitmaprenderer id=the-offscreencanvas-interface:offscreencanvas-context-bitmaprenderer-2>bitmaprenderer</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return null.
       <td>
        Return the same object as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Throw an <a id=the-offscreencanvas-interface:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-offscreencanvas-interface:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
      <tr><th>"<dfn id=offscreen-context-type-webgl><code>webgl</code></dfn>" or "<dfn id=offscreen-context-type-webgl2><code>webgl2</code></dfn>"
       <td>
        <ol><li><p>Let <var>context</var> be the result of following the instructions given in the
         WebGL specifications' <i>Context Creation</i> sections. <a href=references.html#refsWEBGL>[WEBGL]</a><li><p>If <var>context</var> is null, then return null; otherwise set
         <a id=the-offscreencanvas-interface:this-13 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-6>context
         mode</a> to <a href=#offscreencanvas-context-webgl id=the-offscreencanvas-interface:offscreencanvas-context-webgl-2>webgl</a> or <a href=#offscreencanvas-context-webgl2 id=the-offscreencanvas-interface:offscreencanvas-context-webgl2-2>webgl2</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return the same value as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Return null.
       <td>
        Throw an <a id=the-offscreencanvas-interface:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-offscreencanvas-interface:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
      <tr><th>"<dfn id=offscreen-context-type-webgpu><code>webgpu</code></dfn>"
       <td>
        <ol><li><p>Let <var>context</var> be the result of following the instructions given in
         <cite>WebGPU</cite>'s <a href=https://gpuweb.github.io/gpuweb/#canvas-rendering>Canvas Rendering</a> section.
         <a href=references.html#refsWEBGPU>[WEBGPU]</a><li><p>If <var>context</var> is null, then return null; otherwise set <a id=the-offscreencanvas-interface:this-14 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
         <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-7>context mode</a> to <a href=#offscreencanvas-context-webgpu id=the-offscreencanvas-interface:offscreencanvas-context-webgpu-2>webgpu</a>.<li><p>Return <var>context</var>.</ol>
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return null.
       <td>
        Return the same value as was returned the last time the method was invoked with this same
        first argument.
       <td>
        Throw an <a id=the-offscreencanvas-interface:invalidstateerror-5 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-offscreencanvas-interface:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.
    </table>
   </ol>

  <hr>

  

  <dl class=domintro><dt><code><var>offscreenCanvas</var>.<a href=#dom-offscreencanvas-width id=dom-offscreencanvas-width-dev>width</a> [
   = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/width title="The width property returns and sets the width of an OffscreenCanvas object.">OffscreenCanvas/width</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>offscreenCanvas</var>.<a href=#dom-offscreencanvas-height id=dom-offscreencanvas-height-dev>height</a> [
   = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/height title="The height property returns and sets the height of an OffscreenCanvas object.">OffscreenCanvas/height</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>These attributes return the dimensions of the <code id=the-offscreencanvas-interface:offscreencanvas-19><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-6>bitmap</a>.</p>

    <p>They can be set, to replace the <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-7>bitmap</a> with a
    new, <a id=the-offscreencanvas-interface:transparent-black-4 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> bitmap of the specified dimensions (effectively resizing
    it).</p>
   </dl>

  

  <p>If either the <dfn data-dfn-for=OffscreenCanvas id=dom-offscreencanvas-width data-dfn-type=attribute><code>width</code></dfn> or <dfn data-dfn-for=OffscreenCanvas id=dom-offscreencanvas-height data-dfn-type=attribute><code>height</code></dfn> attributes of
  an <code id=the-offscreencanvas-interface:offscreencanvas-20><a href=#offscreencanvas>OffscreenCanvas</a></code> object are set (to a new value or to the same value as before) and
  the <code id=the-offscreencanvas-interface:offscreencanvas-21><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-8>context
  mode</a> is <a href=#offscreencanvas-context-2d id=the-offscreencanvas-interface:offscreencanvas-context-2d-3>2d</a>, then <a href=#reset-the-rendering-context-to-its-default-state id=the-offscreencanvas-interface:reset-the-rendering-context-to-its-default-state>reset the rendering
  context to its default state</a> and resize the <code id=the-offscreencanvas-interface:offscreencanvas-22><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-8>bitmap</a> to the new values of the <code id=the-offscreencanvas-interface:dom-offscreencanvas-width-4><a href=#dom-offscreencanvas-width>width</a></code> and <code id=the-offscreencanvas-interface:dom-offscreencanvas-height-4><a href=#dom-offscreencanvas-height>height</a></code> attributes.</p>

  <p>The resizing behavior for "<code id=the-offscreencanvas-interface:offscreen-context-type-webgl-5><a href=#offscreen-context-type-webgl>webgl</a></code>" and "<code id=the-offscreencanvas-interface:offscreen-context-type-webgl2-4><a href=#offscreen-context-type-webgl2>webgl2</a></code>" contexts is defined in the WebGL
  specifications. <a href=references.html#refsWEBGL>[WEBGL]</a></p>

  <p>The resizing behavior for "<code id=the-offscreencanvas-interface:offscreen-context-type-webgpu-4><a href=#offscreen-context-type-webgpu>webgpu</a></code>" context
  is defined in <cite>WebGPU</cite>. <a href=references.html#refsWEBGPU>[WEBGPU]</a></p>

  

  <p class=note>If an <code id=the-offscreencanvas-interface:offscreencanvas-23><a href=#offscreencanvas>OffscreenCanvas</a></code> object whose dimensions were changed has
  a <a href=#offscreencanvas-placeholder id=the-offscreencanvas-interface:offscreencanvas-placeholder-5>placeholder <code>canvas</code> element</a>, then
  the <a href=#offscreencanvas-placeholder id=the-offscreencanvas-interface:offscreencanvas-placeholder-6>placeholder <code>canvas</code> element</a>'s
  <a href=https://drafts.csswg.org/css-images/#natural-dimensions id=the-offscreencanvas-interface:natural-dimensions data-x-internal=natural-dimensions>natural size</a> will only be updated during the
  <code id=the-offscreencanvas-interface:offscreencanvas-24><a href=#offscreencanvas>OffscreenCanvas</a></code>'s <a id=the-offscreencanvas-interface:relevant-agent-2 href=webappapis.html#relevant-agent>relevant agent</a>'s <a href=webappapis.html#concept-agent-event-loop id=the-offscreencanvas-interface:concept-agent-event-loop-2>event loop</a>'s <a id=the-offscreencanvas-interface:update-the-rendering-2 href=webappapis.html#update-the-rendering>update the rendering</a> steps.</p>

  <dl class=domintro><dt><code><var>promise</var> = <var>offscreenCanvas</var>.<a href=#dom-offscreencanvas-converttoblob id=dom-offscreencanvas-converttoblob-dev>convertToBlob</a>([<var>options</var>])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/convertToBlob title="The OffscreenCanvas.convertToBlob() method creates a Blob object representing the image contained in the canvas.">OffscreenCanvas/convertToBlob</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns a promise that will fulfill with a new <code id=the-offscreencanvas-interface:blob-2><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object representing a file
    containing the image in the <code id=the-offscreencanvas-interface:offscreencanvas-25><a href=#offscreencanvas>OffscreenCanvas</a></code> object.</p>

    <p>The argument, if provided, is a dictionary that controls the encoding options of the image
    file to be created. The <code id=the-offscreencanvas-interface:image-encode-options-type-2><a href=#image-encode-options-type>type</a></code> field specifies the
    file format and has a default value of "<code id=the-offscreencanvas-interface:image/png><a href=indices.html#image/png>image/png</a></code>"; that type is also used if the
    requested type isn't supported. If the image format supports variable quality (such as
    "<code id=the-offscreencanvas-interface:image/jpeg><a href=indices.html#image/jpeg>image/jpeg</a></code>"), then the <code id=the-offscreencanvas-interface:image-encode-options-quality-2><a href=#image-encode-options-quality>quality</a></code>
    field is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the
    resulting image.</p>
   <dt><code><var>canvas</var>.<a href=#dom-offscreencanvas-transfertoimagebitmap id=dom-offscreencanvas-transfertoimagebitmap-dev>transferToImageBitmap</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/transferToImageBitmap title="The OffscreenCanvas.transferToImageBitmap() method creates an ImageBitmap object from the most recently rendered image of the OffscreenCanvas. The OffscreenCanvas allocates a new image for its subsequent rendering.">OffscreenCanvas/transferToImageBitmap</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns a newly created <code id=the-offscreencanvas-interface:imagebitmap-2><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> object with the image in the
    <code id=the-offscreencanvas-interface:offscreencanvas-26><a href=#offscreencanvas>OffscreenCanvas</a></code> object. The image in the <code id=the-offscreencanvas-interface:offscreencanvas-27><a href=#offscreencanvas>OffscreenCanvas</a></code> object is
    replaced with a new blank image.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=OffscreenCanvas id=dom-offscreencanvas-converttoblob data-dfn-type=method><code>convertToBlob(<var>options</var>)</code></dfn> method
  steps are:</p>

  <ol><li><p>If the value of <a id=the-offscreencanvas-interface:this-15 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-offscreencanvas-interface:detached href=structured-data.html#detached>[[Detached]]</a> internal slot is true, then
   return <a id=the-offscreencanvas-interface:a-promise-rejected-with href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> an <a id=the-offscreencanvas-interface:invalidstateerror-6 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=the-offscreencanvas-interface:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <a id=the-offscreencanvas-interface:this-16 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-9>context mode</a> is
   <a href=#offscreencanvas-context-2d id=the-offscreencanvas-interface:offscreencanvas-context-2d-4>2d</a> and the rendering context's <a href=#output-bitmap id=the-offscreencanvas-interface:output-bitmap>output
   bitmap</a>'s <a href=#concept-canvas-origin-clean id=the-offscreencanvas-interface:concept-canvas-origin-clean>origin-clean</a> flag is set to
   false, then return <a id=the-offscreencanvas-interface:a-promise-rejected-with-2 href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> a
   <a id=the-offscreencanvas-interface:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-offscreencanvas-interface:domexception-7><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

   <li><p>If <a id=the-offscreencanvas-interface:this-17 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-9>bitmap</a> has no pixels
   (i.e., either its horizontal dimension or its vertical dimension is zero), then return <a id=the-offscreencanvas-interface:a-promise-rejected-with-3 href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a
   promise rejected with</a> an <a id=the-offscreencanvas-interface:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a>
   <code id=the-offscreencanvas-interface:domexception-8><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>bitmap</var> be a copy of <a id=the-offscreencanvas-interface:this-18 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-10>bitmap</a>.<li><p>Let <var>result</var> be a new promise object.<li><p>Let <var>global</var> be <a id=the-offscreencanvas-interface:this-19 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-offscreencanvas-interface:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global object</a>.<li>
    <p>Run these steps <a id=the-offscreencanvas-interface:in-parallel href=infrastructure.html#in-parallel>in parallel</a>:</p>

    <ol><li><p>Let <var>file</var> be <a href=#a-serialisation-of-the-bitmap-as-a-file id=the-offscreencanvas-interface:a-serialisation-of-the-bitmap-as-a-file>a
     serialization of <var>bitmap</var> as a file</a>, with <var>options</var>'s <dfn id=image-encode-options-type><code>type</code></dfn> and <dfn id=image-encode-options-quality><code>quality</code></dfn> if present.<li>
      <p><a id=the-offscreencanvas-interface:queue-a-global-task href=webappapis.html#queue-a-global-task>Queue a global task</a> on the <a href=#canvas-blob-serialisation-task-source id=the-offscreencanvas-interface:canvas-blob-serialisation-task-source>canvas blob serialization task source</a>
      given <var>global</var> to run these steps:</p>

      <ol><li><p>If <var>file</var> is null, then reject <var>result</var> with an
       <a id=the-offscreencanvas-interface:encodingerror href=https://webidl.spec.whatwg.org/#encodingerror data-x-internal=encodingerror>"<code>EncodingError</code>"</a> <code id=the-offscreencanvas-interface:domexception-9><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Otherwise, resolve <var>result</var> with a new <code id=the-offscreencanvas-interface:blob-3><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object, created in
       <var>global</var>'s <a href=webappapis.html#concept-relevant-realm id=the-offscreencanvas-interface:concept-relevant-realm>relevant realm</a>, representing
       <var>file</var>. <a href=references.html#refsFILEAPI>[FILEAPI]</a></ol>
     </ol>
   <li><p>Return <var>result</var>.</ol>

  <p>The <dfn data-dfn-for=OffscreenCanvas id=dom-offscreencanvas-transfertoimagebitmap data-dfn-type=method><code>transferToImageBitmap()</code></dfn> method,
  when invoked, must run the following steps:</p>
  <ol><li><p>If the value of this <code id=the-offscreencanvas-interface:offscreencanvas-28><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a id=the-offscreencanvas-interface:detached-2 href=structured-data.html#detached>[[Detached]]</a>
   internal slot is set to true, then throw an <a id=the-offscreencanvas-interface:invalidstateerror-7 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=the-offscreencanvas-interface:domexception-10><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If this <code id=the-offscreencanvas-interface:offscreencanvas-29><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a href=#offscreencanvas-context-mode id=the-offscreencanvas-interface:offscreencanvas-context-mode-10>context mode</a> is set to <a href=#offscreencanvas-context-none id=the-offscreencanvas-interface:offscreencanvas-context-none-3>none</a>, then throw an
   <a id=the-offscreencanvas-interface:invalidstateerror-8 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-offscreencanvas-interface:domexception-11><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>image</var> be a newly created <code id=the-offscreencanvas-interface:imagebitmap-3><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> object that references
   the same underlying bitmap data as this <code id=the-offscreencanvas-interface:offscreencanvas-30><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-11>bitmap</a>.<li>
    <p>Set this <code id=the-offscreencanvas-interface:offscreencanvas-31><a href=#offscreencanvas>OffscreenCanvas</a></code> object's <a href=#offscreencanvas-bitmap id=the-offscreencanvas-interface:offscreencanvas-bitmap-12>bitmap</a> to reference a newly created bitmap of the same
    dimensions and color space as the previous bitmap, and with its pixels initialized to
    <a id=the-offscreencanvas-interface:transparent-black-5 href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>, or <a id=the-offscreencanvas-interface:opaque-black href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque black</a> if the rendering context's <a href=#concept-canvas-alpha id=the-offscreencanvas-interface:concept-canvas-alpha>alpha</a> is false.</p>

    <p class=note>This means that if the rendering context of this <code id=the-offscreencanvas-interface:offscreencanvas-32><a href=#offscreencanvas>OffscreenCanvas</a></code> is
    a <code id=the-offscreencanvas-interface:webglrenderingcontext-2><a data-x-internal=webglrenderingcontext href=https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext>WebGLRenderingContext</a></code>, the value of <code id=the-offscreencanvas-interface:webglcontextattributes><a data-x-internal=webglcontextattributes href=https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLContextAttributes>preserveDrawingBuffer</a></code> will have no effect.
    <a href=references.html#refsWEBGL>[WEBGL]</a></p>
   <li><p>Return <var>image</var>.</ol>
  

  <p>The following are the <a id=the-offscreencanvas-interface:event-handlers href=webappapis.html#event-handlers>event handlers</a> (and their corresponding <a href=webappapis.html#event-handler-event-type id=the-offscreencanvas-interface:event-handler-event-type>event handler event types</a>) that must be supported,
  as <a id=the-offscreencanvas-interface:event-handler-idl-attributes href=webappapis.html#event-handler-idl-attributes>event handler IDL attributes</a>, by all objects implementing the
  <code id=the-offscreencanvas-interface:offscreencanvas-33><a href=#offscreencanvas>OffscreenCanvas</a></code> interface:</p>

  <table><thead><tr><th><a href=webappapis.html#event-handlers id=the-offscreencanvas-interface:event-handlers-2>Event handler</a> <th><a id=the-offscreencanvas-interface:event-handler-event-type-2 href=webappapis.html#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=OffscreenCanvas id=handler-offscreencanvas-oncontextlost data-dfn-type=attribute><code>oncontextlost</code></dfn> <td> <code id=the-offscreencanvas-interface:event-contextlost-2><a href=indices.html#event-contextlost>contextlost</a></code>
    <tr><td><dfn data-dfn-for=OffscreenCanvas id=handler-offscreencanvas-oncontextrestored data-dfn-type=attribute><code>oncontextrestored</code></dfn> <td> <code id=the-offscreencanvas-interface:event-contextrestored-2><a href=indices.html#event-contextrestored>contextrestored</a></code>
  </table>

  <h6 id=the-offscreen-2d-rendering-context><span class=secno>4.12.5.3.1</span> The offscreen 2D rendering context<a href=#the-offscreen-2d-rendering-context class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D title="The OffscreenCanvasRenderingContext2D interface is a CanvasRenderingContext2D rendering context for drawing to the bitmap of an OffscreenCanvas object. It is similar to the CanvasRenderingContext2D object, with the following differences:">OffscreenCanvasRenderingContext2D</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>105+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>69+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <pre><code class='idl'>[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn id='offscreencanvasrenderingcontext2d' data-dfn-type='interface'><c- g>OffscreenCanvasRenderingContext2D</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#offscreencanvas' id='the-offscreen-2d-rendering-context:offscreencanvas'><c- n>OffscreenCanvas</c-></a> <a href='#offscreencontext2d-canvas' id='the-offscreen-2d-rendering-context:offscreencontext2d-canvas'><c- g>canvas</c-></a>;
};

<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvassettings' id='the-offscreen-2d-rendering-context:canvassettings'><c- n>CanvasSettings</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-2'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasstate' id='the-offscreen-2d-rendering-context:canvasstate'><c- n>CanvasState</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-3'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvastransform' id='the-offscreen-2d-rendering-context:canvastransform'><c- n>CanvasTransform</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-4'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvascompositing' id='the-offscreen-2d-rendering-context:canvascompositing'><c- n>CanvasCompositing</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-5'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasimagesmoothing' id='the-offscreen-2d-rendering-context:canvasimagesmoothing'><c- n>CanvasImageSmoothing</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-6'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasfillstrokestyles' id='the-offscreen-2d-rendering-context:canvasfillstrokestyles'><c- n>CanvasFillStrokeStyles</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-7'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasshadowstyles' id='the-offscreen-2d-rendering-context:canvasshadowstyles'><c- n>CanvasShadowStyles</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-8'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasfilters' id='the-offscreen-2d-rendering-context:canvasfilters'><c- n>CanvasFilters</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-9'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasrect' id='the-offscreen-2d-rendering-context:canvasrect'><c- n>CanvasRect</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-10'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasdrawpath' id='the-offscreen-2d-rendering-context:canvasdrawpath'><c- n>CanvasDrawPath</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-11'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvastext' id='the-offscreen-2d-rendering-context:canvastext'><c- n>CanvasText</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-12'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasdrawimage' id='the-offscreen-2d-rendering-context:canvasdrawimage'><c- n>CanvasDrawImage</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-13'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvasimagedata' id='the-offscreen-2d-rendering-context:canvasimagedata'><c- n>CanvasImageData</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-14'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvaspathdrawingstyles' id='the-offscreen-2d-rendering-context:canvaspathdrawingstyles'><c- n>CanvasPathDrawingStyles</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-15'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvastextdrawingstyles' id='the-offscreen-2d-rendering-context:canvastextdrawingstyles'><c- n>CanvasTextDrawingStyles</c-></a>;
<a href='#offscreencanvasrenderingcontext2d' id='the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-16'><c- n>OffscreenCanvasRenderingContext2D</c-></a> <c- b>includes</c-> <a href='#canvaspath' id='the-offscreen-2d-rendering-context:canvaspath'><c- n>CanvasPath</c-></a>;</code></pre>

  <p>The <code id=the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-17><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code> object is a rendering context for drawing to
  the <a href=#offscreencanvas-bitmap id=the-offscreen-2d-rendering-context:offscreencanvas-bitmap>bitmap</a> of an <code id=the-offscreen-2d-rendering-context:offscreencanvas-2><a href=#offscreencanvas>OffscreenCanvas</a></code> object.
  It is similar to the <code id=the-offscreen-2d-rendering-context:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object, with the following
  differences:</p>

  <ul><li><p>there is no support for <a href=#canvasuserinterface id=the-offscreen-2d-rendering-context:canvasuserinterface>user interface</a>
   features;<li><p>its <code id=the-offscreen-2d-rendering-context:offscreencontext2d-canvas-2><a href=#offscreencontext2d-canvas>canvas</a></code> attribute refers to an
   <code id=the-offscreen-2d-rendering-context:offscreencanvas-3><a href=#offscreencanvas>OffscreenCanvas</a></code> object rather than a <code id=the-offscreen-2d-rendering-context:the-canvas-element><a href=#the-canvas-element>canvas</a></code> element;</ul>

  <p>An <code id=the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-18><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code> object has an <dfn id=associated-offscreencanvas-object>associated
  <code>OffscreenCanvas</code> object</dfn>, which is the <code id=the-offscreen-2d-rendering-context:offscreencanvas-4><a href=#offscreencanvas>OffscreenCanvas</a></code> object
  from which the <code id=the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-19><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code> object was created.

  <dl class=domintro><dt><code><var>offscreenCanvas</var> = <var>offscreenCanvasRenderingContext2D</var>.<a href=#offscreencontext2d-canvas id=offscreencontext2d-canvas-dev>canvas</a></code><dd><p>Returns the <a href=#associated-offscreencanvas-object id=the-offscreen-2d-rendering-context:associated-offscreencanvas-object>associated <code>OffscreenCanvas</code> object</a>.</dl>

  

  <p>The <dfn id=offscreen-2d-context-creation-algorithm>offscreen 2D context creation algorithm</dfn>, which is passed a
  <var>target</var> (an <code id=the-offscreen-2d-rendering-context:offscreencanvas-5><a href=#offscreencanvas>OffscreenCanvas</a></code> object) and optionally some arguments,
  consists of running the following steps:</p>

  <ol><li><p>If the algorithm was passed some arguments, let <var>arg</var> be the first such
   argument. Otherwise, let <var>arg</var> be undefined.<li><p>Let <var>settings</var> be the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=the-offscreen-2d-rendering-context:concept-idl-convert data-x-internal=concept-idl-convert>converting</a> <var>arg</var> to the dictionary type
   <code id=the-offscreen-2d-rendering-context:canvasrenderingcontext2dsettings><a href=#canvasrenderingcontext2dsettings>CanvasRenderingContext2DSettings</a></code>. (This can throw an exception.)<li><p>Let <var>context</var> be a new <code id=the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-20><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code>
   object.<li><p>Set <var>context</var>'s <a href=#associated-offscreencanvas-object id=the-offscreen-2d-rendering-context:associated-offscreencanvas-object-2>associated <code>OffscreenCanvas</code> object</a> to
   <var>target</var>.<li><p>Run the <a href=#canvas-setting-init-bitmap id=the-offscreen-2d-rendering-context:canvas-setting-init-bitmap>canvas settings output bitmap
   initialization algorithm</a>, given <var>context</var> and <var>settings</var>.<li><p>Set <var>context</var>'s <a href=#output-bitmap id=the-offscreen-2d-rendering-context:output-bitmap>output bitmap</a> to a newly created bitmap with the
   dimensions specified by the <code id=the-offscreen-2d-rendering-context:dom-offscreencanvas-width><a href=#dom-offscreencanvas-width>width</a></code> and <code id=the-offscreen-2d-rendering-context:dom-offscreencanvas-height><a href=#dom-offscreencanvas-height>height</a></code> attributes of <var>target</var>, and set
   <var>target</var>'s bitmap to the same bitmap (so that they are shared).<li><p>If <var>context</var>'s <a href=#concept-canvas-alpha id=the-offscreen-2d-rendering-context:concept-canvas-alpha>alpha</a> flag is set to
   true, initialize all the pixels of <var>context</var>'s <a href=#output-bitmap id=the-offscreen-2d-rendering-context:output-bitmap-2>output bitmap</a> to
   <a id=the-offscreen-2d-rendering-context:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>. Otherwise, initialize the pixels to <a id=the-offscreen-2d-rendering-context:opaque-black href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque
   black</a>.<li><p>Return <var>context</var>.</ol>

  <p class=note>Implementations are encouraged to short-circuit the graphics update steps of
  the <a id=the-offscreen-2d-rendering-context:window-event-loop href=webappapis.html#window-event-loop>window event loop</a> for the purposes of updating the contents of a <a href=#offscreencanvas-placeholder id=the-offscreen-2d-rendering-context:offscreencanvas-placeholder>placeholder <code>canvas</code> element</a> to the
  display. This could mean, for example, that the bitmap contents are copied directly to a graphics
  buffer that is mapped to the physical display location of the <a href=#offscreencanvas-placeholder id=the-offscreen-2d-rendering-context:offscreencanvas-placeholder-2>placeholder <code>canvas</code> element</a>. This or
  similar short-circuiting approaches can significantly reduce display latency, especially in cases
  where the <code id=the-offscreen-2d-rendering-context:offscreencanvas-6><a href=#offscreencanvas>OffscreenCanvas</a></code> is updated from a
  <a id=the-offscreen-2d-rendering-context:worker-event-loop-2 href=webappapis.html#worker-event-loop-2>worker event loop</a> and the <a id=the-offscreen-2d-rendering-context:window-event-loop-2 href=webappapis.html#window-event-loop>window event loop</a> of the <a href=#offscreencanvas-placeholder id=the-offscreen-2d-rendering-context:offscreencanvas-placeholder-3>placeholder <code>canvas</code> element</a> is busy.
  However, such shortcuts cannot have any script-observable side-effects. This means that the
  committed bitmap still needs to be sent to the <a href=#offscreencanvas-placeholder id=the-offscreen-2d-rendering-context:offscreencanvas-placeholder-4>placeholder <code>canvas</code> element</a>, in case the
  element is used as a <code id=the-offscreen-2d-rendering-context:canvasimagesource><a href=#canvasimagesource>CanvasImageSource</a></code>, as an <code id=the-offscreen-2d-rendering-context:imagebitmapsource><a href=imagebitmap-and-animations.html#imagebitmapsource>ImageBitmapSource</a></code>, or in
  case <code id=the-offscreen-2d-rendering-context:dom-canvas-todataurl><a href=#dom-canvas-todataurl>toDataURL()</a></code> or <code id=the-offscreen-2d-rendering-context:dom-canvas-toblob><a href=#dom-canvas-toblob>toBlob()</a></code> are called on it.</p>

  <p>The <dfn data-dfn-for=OffscreenCanvas id=offscreencontext2d-canvas data-dfn-type=attribute><code>canvas</code></dfn> attribute, on getting, must return this
  <code id=the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-21><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code>'s <a href=#associated-offscreencanvas-object id=the-offscreen-2d-rendering-context:associated-offscreencanvas-object-3>associated <code>OffscreenCanvas</code>
  object</a>.

  </p>

  

  <h5 id=colour-spaces-and-colour-correction><span class=secno>4.12.5.4</span> Color spaces and color space
  conversion<a href=#colour-spaces-and-colour-correction class=self-link></a></h5>

  <p>The <code id=colour-spaces-and-colour-correction:the-canvas-element><a href=#the-canvas-element>canvas</a></code> APIs provide mechanisms for specifying the color space of the canvas's
  backing store. The default backing store color space for all canvas APIs is
  <a id="colour-spaces-and-colour-correction:'srgb'" href=https://drafts.csswg.org/css-color/#valdef-color-srgb data-x-internal="'srgb'">'srgb'</a>.</p>

  <p><a href=https://drafts.csswg.org/css-color/#color-conversion id=colour-spaces-and-colour-correction:converting-colors data-x-internal=converting-colors>Color space conversion</a> must be applied to the canvas's
  backing store when rendering the canvas to the output device. This color space conversion must be
  identical to the color space conversion that would be applied to an <code id=colour-spaces-and-colour-correction:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element with
  a color profile that specifies the same <a href=#concept-canvas-color-space id=colour-spaces-and-colour-correction:concept-canvas-color-space>color
  space</a> as the canvas's backing store.</p>

  <p>When drawing content to a 2D context, all inputs must be <a href=https://drafts.csswg.org/css-color/#color-conversion id=colour-spaces-and-colour-correction:converting-colors-2 data-x-internal=converting-colors>converted</a> to the <a href=#concept-canvas-color-space id=colour-spaces-and-colour-correction:concept-canvas-color-space-2>context's color
  space</a> before drawing. Interpolation of gradient color stops must be performed on color
  values after conversion to the <a href=#concept-canvas-color-space id=colour-spaces-and-colour-correction:concept-canvas-color-space-3>context's color
  space</a>. Alpha blending must be performed on values after conversion to the <a href=#concept-canvas-color-space id=colour-spaces-and-colour-correction:concept-canvas-color-space-4>context's color space</a>.</p>

  <p class=note>There do not exist any inputs to a 2D context for which the color space is
  undefined. The color space for CSS colors is defined in <cite>CSS Color</cite>. The color space
  for images that specify no color profile information is assumed to be <a id="colour-spaces-and-colour-correction:'srgb'-2" href=https://drafts.csswg.org/css-color/#valdef-color-srgb data-x-internal="'srgb'">'srgb'</a>, as
  specified in the <a href=https://drafts.csswg.org/css-color/#untagged>Color Spaces of Untagged
  Colors</a> section of <cite>CSS Color</cite>. <a href=references.html#refsCSSCOLOR>[CSSCOLOR]</a></p>

  



  <h5 id=serialising-bitmaps-to-a-file><span class=secno>4.12.5.5</span> Serializing bitmaps to a file<a href=#serialising-bitmaps-to-a-file class=self-link></a></h5>

  

  <p>When a user agent is to create <dfn id=a-serialisation-of-the-bitmap-as-a-file>a
  serialization of the bitmap as a file</dfn>, given a <var>type</var> and an optional
  <var>quality</var>, it must create an image file in the format given by <var>type</var>. If an
  error occurs during the creation of the image file (e.g. an internal encoder error), then the
  result of the serialization is null. <a href=references.html#refsPNG>[PNG]</a></p>

  <p>The image file's pixel data must be the bitmap's pixel data scaled to one image pixel per
  coordinate space unit, and if the file format used supports encoding resolution metadata, the
  resolution must be given as 96dpi (one image pixel per <a href=https://drafts.csswg.org/css-values/#px id="serialising-bitmaps-to-a-file:'px'" data-x-internal="'px'">CSS pixel</a>).</p>

  <p>If <var>type</var> is supplied, then it must be interpreted as a <a href=https://mimesniff.spec.whatwg.org/#mime-type id=serialising-bitmaps-to-a-file:mime-type data-x-internal=mime-type>MIME
  type</a> giving the format to use. If the type has any parameters, then it must be treated as
  not supported.</p>

  <p class=example>For example, the value "<code id=serialising-bitmaps-to-a-file:image/png><a href=indices.html#image/png>image/png</a></code>" would mean to generate a PNG
  image, the value "<code id=serialising-bitmaps-to-a-file:image/jpeg><a href=indices.html#image/jpeg>image/jpeg</a></code>" would mean to generate a JPEG image, and the value
  "<code id=serialising-bitmaps-to-a-file:image/svg+xml><a href=indices.html#image/svg+xml>image/svg+xml</a></code>" would mean to generate an SVG image (which would require that the
  user agent track how the bitmap was generated, an unlikely, though potentially awesome,
  feature).</p>

  <p>User agents must support PNG ("<code id=serialising-bitmaps-to-a-file:image/png-2><a href=indices.html#image/png>image/png</a></code>"). User agents may support other types.
  If the user agent does not support the requested type, then it must create the file using the PNG
  format. <a href=references.html#refsPNG>[PNG]</a></p>

  <p>User agents must <a href=https://infra.spec.whatwg.org/#ascii-lowercase id=serialising-bitmaps-to-a-file:converted-to-ascii-lowercase data-x-internal=converted-to-ascii-lowercase>convert the provided type to ASCII
  lowercase</a> before establishing if they support that type.</p>

  <p>For image types that do not support an alpha component, the serialized image must be the bitmap
  image composited onto an <a id=serialising-bitmaps-to-a-file:opaque-black href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque black</a> background using the <a href=https://drafts.fxtf.org/compositing/#porterduffcompositingoperators_srcover id=serialising-bitmaps-to-a-file:gcop-source-over data-x-internal=gcop-source-over>source-over</a> compositing operator.</p>

  <p>For image types that support color profiles, the serialized image must include a color profile
  indicating the color space of the underlying bitmap. For image types that do not support color
  profiles, the serialized image must be <a href=https://drafts.csswg.org/css-color/#color-conversion id=serialising-bitmaps-to-a-file:converting-colors data-x-internal=converting-colors>converted</a> to the
  <a id="serialising-bitmaps-to-a-file:'srgb'" href=https://drafts.csswg.org/css-color/#valdef-color-srgb data-x-internal="'srgb'">'srgb'</a> color space using <a id="serialising-bitmaps-to-a-file:'relative-colorimetric'" href=https://drafts.csswg.org/css-color-5/#valdef-color-profile-rendering-intent-relative-colorimetric data-x-internal="'relative-colorimetric'">'relative-colorimetric'</a> rendering intent.</p>

  <p class=note>Thus, in the 2D context, calling the <code id=serialising-bitmaps-to-a-file:dom-context-2d-drawimage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method to render the output of the <code id=serialising-bitmaps-to-a-file:dom-canvas-todataurl><a href=#dom-canvas-todataurl>toDataURL()</a></code> or <code id=serialising-bitmaps-to-a-file:dom-canvas-toblob><a href=#dom-canvas-toblob>toBlob()</a></code> method to the canvas, given the appropriate dimensions,
  has no visible effect beyond, at most, clipping colors of the canvas to a more narrow gamut.</p>

  <p>For image types that support multiple bit depths, the serialized image must use the bit depth
  that best preserves content of the underlying bitmap.</p>

  <p class=example>For example, when serializing a 2D context that has
  <a href=#concept-canvas-color-type id=serialising-bitmaps-to-a-file:concept-canvas-color-type>color type</a> of
  <a href=#dom-canvascolortype-float16 id=serialising-bitmaps-to-a-file:dom-canvascolortype-float16>float16</a> to <var>type</var>
  "<code id=serialising-bitmaps-to-a-file:image/png-3><a href=indices.html#image/png>image/png</a></code>", the resulting image would have 16 bits per sample.
  This serialization will still lose significant detail (all values less than 0.5/65535
  would be clamped to 0, and all values greater than 1 would be clamped to 1).</p>

  <p>If <var>type</var> is an image format that supports variable quality (such as
  "<code id=serialising-bitmaps-to-a-file:image/jpeg-2><a href=indices.html#image/jpeg>image/jpeg</a></code>"), <var>quality</var> is given, and <var>type</var> is not
  "<code id=serialising-bitmaps-to-a-file:image/png-4><a href=indices.html#image/png>image/png</a></code>", then, if <var>quality</var> <a href=https://tc39.es/ecma262/#sec-ecmascript-language-types-number-type id=serialising-bitmaps-to-a-file:js-number data-x-internal=js-number>is a Number</a>
  in the range 0.0 to 1.0 inclusive, the user agent must treat <var>quality</var> as the desired
  quality level. Otherwise, the user agent must use its default quality value, as if the
  <var>quality</var> argument had not been given.</p>

  <p class=note>The use of type-testing here, instead of simply declaring <var>quality</var> as
  a Web IDL <code>double</code>, is a historical artifact.</p>

  <p class=note>Different implementations can have slightly different interpretations of
  "quality". When the quality is not specified, an implementation-specific default is used that
  represents a reasonable compromise between compression ratio, image quality, and encoding
  time.</p>

  


  

  <h5 id=security-with-canvas-elements><span class=secno>4.12.5.6</span> Security with <code id=security-with-canvas-elements:the-canvas-element><a href=#the-canvas-element>canvas</a></code> elements<a href=#security-with-canvas-elements class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p><strong>Information leakage</strong> can occur if scripts from one <a id=security-with-canvas-elements:concept-origin href=browsers.html#concept-origin>origin</a> can
  access information (e.g. read pixels) from images from another origin (one that isn't the <a href=browsers.html#same-origin id=security-with-canvas-elements:same-origin>same</a>).</p>

  <p>To mitigate this, bitmaps used with <code id=security-with-canvas-elements:the-canvas-element-2><a href=#the-canvas-element>canvas</a></code> elements, <code id=security-with-canvas-elements:offscreencanvas><a href=#offscreencanvas>OffscreenCanvas</a></code>
  objects, and <code id=security-with-canvas-elements:imagebitmap><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> objects are defined to have a flag indicating whether they
  are <a href=#concept-canvas-origin-clean id=security-with-canvas-elements:concept-canvas-origin-clean>origin-clean</a>. All bitmaps start with their
  <a href=#concept-canvas-origin-clean id=security-with-canvas-elements:concept-canvas-origin-clean-2>origin-clean</a> set to true. The flag is set to
  false when cross-origin images are used.</p>

  <p>The <code id=security-with-canvas-elements:dom-canvas-todataurl><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code id=security-with-canvas-elements:dom-canvas-toblob><a href=#dom-canvas-toblob>toBlob()</a></code>, and <code id=security-with-canvas-elements:dom-context-2d-getimagedata><a href=#dom-context-2d-getimagedata>getImageData()</a></code> methods check the flag and will
  throw a <a id=security-with-canvas-elements:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=security-with-canvas-elements:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> rather than leak
  cross-origin data.</p>

  <p>The value of the <a href=#concept-canvas-origin-clean id=security-with-canvas-elements:concept-canvas-origin-clean-3>origin-clean</a> flag is
  propagated from a source's bitmap to a new <code id=security-with-canvas-elements:imagebitmap-2><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> object by <code id=security-with-canvas-elements:dom-createimagebitmap><a href=imagebitmap-and-animations.html#dom-createimagebitmap>createImageBitmap()</a></code>. Conversely, a destination <code id=security-with-canvas-elements:the-canvas-element-3><a href=#the-canvas-element>canvas</a></code> element's bitmap will have its <a href=#concept-canvas-origin-clean id=security-with-canvas-elements:concept-canvas-origin-clean-4>origin-clean</a> flags set to false by <code id=security-with-canvas-elements:dom-context-2d-drawimage><a href=#dom-context-2d-drawimage>drawImage</a></code> if the source image is an
  <code id=security-with-canvas-elements:imagebitmap-3><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> object whose bitmap has its <a href=#concept-canvas-origin-clean id=security-with-canvas-elements:concept-canvas-origin-clean-5>origin-clean</a> flag set to false.</p>

  <p>The flag can be reset in certain situations; for example, when changing the value of the
  <code id=security-with-canvas-elements:attr-canvas-width><a href=#attr-canvas-width>width</a></code> or the <code id=security-with-canvas-elements:attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attribute of the <code id=security-with-canvas-elements:the-canvas-element-4><a href=#the-canvas-element>canvas</a></code> element
  to which a <code id=security-with-canvas-elements:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> is bound, the bitmap is
  cleared and its <a href=#concept-canvas-origin-clean id=security-with-canvas-elements:concept-canvas-origin-clean-6>origin-clean</a> flag is reset.</p>

  <p>When using an <code id=security-with-canvas-elements:imagebitmaprenderingcontext><a href=#imagebitmaprenderingcontext>ImageBitmapRenderingContext</a></code>, the value of the <a href=#concept-canvas-origin-clean id=security-with-canvas-elements:concept-canvas-origin-clean-7>origin-clean</a> flag is propagated from
  <code id=security-with-canvas-elements:imagebitmap-4><a href=imagebitmap-and-animations.html#imagebitmap>ImageBitmap</a></code> objects when they are transferred to the <code id=security-with-canvas-elements:the-canvas-element-5><a href=#the-canvas-element>canvas</a></code>
  via <a href=#dom-imagebitmaprenderingcontext-transferfromimagebitmap id=security-with-canvas-elements:dom-imagebitmaprenderingcontext-transferfromimagebitmap>transferFromImageBitmap()</a>.</p>

  

  <h5 id=premultiplied-alpha-and-the-2d-rendering-context><span class=secno>4.12.5.7</span> Premultiplied alpha and the 2D rendering context<a href=#premultiplied-alpha-and-the-2d-rendering-context class=self-link></a></h5>

  <p><dfn id=concept-premultiplied-alpha>Premultiplied alpha</dfn> refers to one way of
  representing transparency in an image, the other being non-premultiplied alpha.</p>

  <p>Under non-premultiplied alpha, the red, green, and blue components of a pixel represent that
  pixel's color, and its alpha component represents that pixel's opacity.</p>

  <p>Under premultiplied alpha, however, the red, green, and blue components of a pixel represent
  the amounts of color that the pixel adds to the image, and its alpha component represents the
  amount that the pixel obscures whatever is behind it.</p>

  <div class=example>
   <p>For instance, assuming the color components range from 0 (off) to 255 (full intensity), these
   example colors are represented in the following ways:</p>

   <table><thead><tr><th>CSS color representation
      <th>Premultiplied representation
      <th>Non-premultiplied representation
      <th>Description of color
      <th>Image of color blended above other content
    <tbody><tr><td>rgba(255, 127, 0, 1)
      <td>255, 127, 0, 255
      <td>255, 127, 0, 255
      <td>Completely-opaque orange
      <td><img src=../images/premultiplied-example-1.png width=96 alt="An opaque orange circle sits atop a background" height=96>
     <tr><td>rgba(255, 255, 0, 0.5)
      <td>127, 127, 0, 127
      <td>255, 255, 0, 127
      <td>Halfway-opaque yellow
      <td><img src=../images/premultiplied-example-2.png width=96 alt="A yellow circle, halfway transparent, sits atop a background" height=96>
     <tr><td>Unrepresentable
      <td>255, 127, 0, 127
      <td>Unrepresentable
      <td>Additive halfway-opaque orange
      <td><img src=../images/premultiplied-example-3.png width=96 alt="An orange circle somewhat brightens the background that it sits atop" height=96>
     <tr><td>Unrepresentable
      <td>255, 127, 0, 0
      <td>Unrepresentable
      <td>Additive fully-transparent orange
      <td><img src=../images/premultiplied-example-4.png width=96 alt="An orange circle completely brightens the background that it sits atop" height=96>
     <tr><td>rgba(255, 127, 0, 0)
      <td>0, 0, 0, 0
      <td>255, 127, 0, 0
      <td>Fully-transparent ("invisible") orange
      <td><img src=../images/premultiplied-example-5.png width=96 alt="An empty background with nothing atop it" height=96>
     <tr><td>rgba(0, 127, 255, 0)
      <td>0, 0, 0, 0
      <td>255, 127, 0, 0
      <td>Fully-transparent ("invisible") turquoise
      <td><img src=../images/premultiplied-example-5.png width=96 alt="An empty background with nothing atop it" height=96>
   </table>
  </div>

  <p><dfn id=convert-to-premultiplied>Converting a color value from a non-premultiplied
  representation to a premultiplied one</dfn> involves multiplying the color's red, green, and
  blue components by its alpha component (remapping the range of the alpha component such that
  "fully transparent" is 0, and "fully opaque" is 1).</p>

  <p><dfn id=convert-from-premultiplied>Converting a color value from a premultiplied
  representation to a non-premultiplied one</dfn> involves the inverse: dividing the color's red,
  green, and blue components by its alpha component.</p>

  <p>As certain colors can only be represented under premultiplied alpha (for instance, additive
  colors), and others can only be represented under non-premultiplied alpha (for instance,
  "invisible" colors which hold certain red, green, and blue values even with no opacity); and
  division and multiplication using finite precision entails a loss of accuracy, converting between
  premultiplied and non-premultiplied alpha is a lossy operation on colors that are not fully
  opaque.</p>

  <p>A <code id=premultiplied-alpha-and-the-2d-rendering-context:canvasrenderingcontext2d><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>'s <a href=#output-bitmap id=premultiplied-alpha-and-the-2d-rendering-context:output-bitmap>output bitmap</a> and an
  <code id=premultiplied-alpha-and-the-2d-rendering-context:offscreencanvasrenderingcontext2d><a href=#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code>'s <a href=#output-bitmap id=premultiplied-alpha-and-the-2d-rendering-context:output-bitmap-2>output bitmap</a> must use premultiplied
  alpha to represent transparent colors.</p>

  <p class=note>It is important for canvas bitmaps to represent colors using premultiplied alpha
  because it affects the range of representable colors. While additive colors cannot currently be
  drawn onto canvases directly because CSS colors are non-premultiplied and cannot represent them,
  it is still possible to, for instance, draw additive colors onto a WebGL canvas and then draw that
  WebGL canvas onto a 2D canvas via <code id=premultiplied-alpha-and-the-2d-rendering-context:dom-context-2d-drawimage><a href=#dom-context-2d-drawimage>drawImage()</a></code>.</p>

  <nav><a href=scripting.html>← 4.12 Scripting</a> — <a href=index.html>Table of Contents</a> — <a href=custom-elements.html>4.13 Custom elements →</a></nav>
